I've only done AJAX with symfony, which uses the prototype framework so I can't help you much with that aspect. But I put together some javascript to alert you once you've scrolled 90% or more down the page, which ought to be enough to get you started. You might also want to take a look at the javascript on that site to see what they do.
Make sure to give your body tag an id. I called it "page".
Code:
<script>
function getRelativeScroll() {
var windowHeight = 0;
var maxScroll = 0;
var scrollPosition = 0;
var bodyMaxScroll = document.getElementById('page').scrollHeight;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
windowHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
windowHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
windowHeight = document.body.clientHeight;
}
maxScroll = bodyMaxScroll-windowHeight;
scrollPosition = document.body.scrollTop;
if (scrollPosition == 0) {
if (window.pageYOffset) {
scrollPosition = window.pageYOffset;
}
else {
scrollPosition = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}
}
// if the scroll position is greater than 90% of the maximum, do your thing
if(scrollPosition/maxScroll > 0.9) {
// this is where the AJAX call(s) that add more content would go
alert(scrollPosition/maxScroll);
}
}
// the number value, in milliseconds, determines how often to check the scroll position
setInterval("getRelativeScroll()",1000)
</script>
Bookmarks