PHPology is a collective of highly skilled, award winning, web gurus.
Contact Raj on 07985 467 213 or email [email protected]

Load Content While Scrolling With jQuery

Working on this art gallery competition project for Internet Week where one of the request was:
"Rather then have pagination links, can we have it so that when the user scrolls to the bottom of the browser, new content is loaded in?"

I had seen websites like this before and always thought it was a really cool feature on a website, esp for a gallery type website.

Searching the net, found this link that gave me a good base to start with. I kind of followed his steps but made a few tweaks to the way the pagination worked.

Below is the code that I used which would send through the page number everytime condition as met which then using PHP displayed the relevent results.

var pageLoaded = 1; //this basically says that we are on page 1 of the results
$(window).scroll(function()
{
	if($(window).scrollTop() == $(document).height() - $(window).height())
	{
		pageLoaded = pageLoaded+1; //when this condition has met, increase the pageLoaded so that I can tell php told load in data for page 2/3/4/5, etc, etc
		$.post("gallery_ajax_load.php?page="+pageLoaded,
			function(data)
			{
				if (data != "")
				{
				$('#submissions').append(data);
				}
			}
		);
		//alert(pageLoaded);
		//console.log(pageLoaded);
	}
});