Auto Paginate

Recently I did a post about website loading. Which had me thinking... Paginiation! Its a lovely device that allows you to not have to display all the content on the same page. There are so many forms of pagination and pagination theories. One of which is a newer method called. "Auto Pagination." It is seen on many sites such as local pages on google and several others.

It basically detects the "windows" scroll and once a certain position on the page has been achieved it loads more content into the page. Some other neat useages of this window scroll is on mashable.com when reading an article if you scroll far enough down it will display the next article on the list. But this is about pagination...

So lets get down to it...

To do this you will need a few things.

1) Get the documents maximum scrolling amount.

2) Get the documents current scrolled position.

3) Some extra true false checks so we don't overload our database!

The Code:

1) Get the maximum scroll height.

I found this in one of the comments on james.padolsey.com

function getDocHeight() {
              return Math.max( $(document).height(), $(window).height(),
                                    /* For opera: */
                                document.documentElement.clientHeight);
}

2) Get the documents current scrolled position.

$(window).scrollTop()

3) What extra checks true/false?

Its a good idea to check to see if you are already checking the database. As when scrolling you could retrigger a script several times. We don't want to check and recheck while something is happening.

Not only that but it is a good idea to stop checking if the database has finished loading all the content it possibly can.

4) Final Set of Code

var loaded_all = false, loadingcontent = false;
var load_x = 8;
var load_y = 1, loadpercentage = .70,height,scrollTop;
var page = "homepage";
var article_section = $("#content_left");//, i = $("#info");
$(window).scroll(function() {
	loadcontent = (($(window).scrollTop() / getDocHeight()) > loadpercentage) ? true : false;
		if(loadcontent && !loadingcontent && !loaded_all){
		loadingcontent = true;
		$.ajax({
   			type: "POST",
   			url: "/articles.php",
   			data: "page="+page+"&load_x="+load_x+"&load_y="+load_y,
   			success: function(d){
   			if(d == "0" || d == "1") loaded_all = true; //Or there is an error.
   			if(d != "0" && d != "1" && d != 0 && d != 1){
   				load_x+=load_y;
   				d = "";
   				$(d).appendTo(article_section);
   				article_section.find(".hide").fadeIn();
   			}
   			loadingcontent = false;
   			},
   			error: function(e){ loadingcontent = false; loaded_All = true; }
 		});
		}
});

So there is a lot going on here.

1) load_x and load_y. These represent the range in my query. load_x = current position in the pagination. load_y = number of items to pull.

2) $(window).scroll(function() { } ); This detects the windows scroll bar when its being scrolled.

3) loadcontent = (($(window).scrollTop() / getDocHeight()) > loadpercentage) ? true : false; Detects when and if we need to load more content. loadperecentage = .70 (70%)

4) if(loadcontent && !loadingcontent && !loaded_all){ } prevents multiple ajax calls to the database when we do not need to.

5) $.ajax({ }); Finally make the call to your script in the backend that basically echo's out the HTML.

6) success: function(d){ }

After the call is done check for errors such as if the page only returns a 0 then the database is done. If it returns another number then you know its an error. And with both those you should probably stop attempting calls on the database.

load_x+=load_y; Is incrementing our current position we are in queuing the database as otherwise we would reloop the same data in your LIMIT query.

To add some animation to this I hide the html in a div and once its been added I fade it in.

Some thoughts -

1. Make sure you always do some error checking.
2. If an error is thrown or something needs to stop you could even unbind the window.scroll.
3. Have a backup pagination. If javascript is disabled you might want to have this especially for web crawlers.
4. Use backup pagination for Mobile. Most Mobile phones can't handle the JQuery scroll. I recommend to fault back to using the regular pagination or do an entirely different mobile site.
5. If you use a backup pagination and if the browser has javascript enabled and its not mobile remove the backup.. $(".pagmenu").remove();