How to Auto "extend" site?

[100%]

If you look at this site
http://www.butdoesitfloat.com/
let it finish loading
then
scroll to the bottom
it then automatically loads the rest of 15 submissions, then when you reach the bottom of that one it does more.
How does one do this?

[imapotato]

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".



<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>