snowindy/jquery-scroll-pagination

scroll & load more

Official post in my blog: http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/

This jQuery Scroll Pagination Plugin was referred by several developer websites as:
http://www.jqueryrain.com/2012/04/best-ajax-jquery-pagination-plugin-tutorial-with-example-demo/
http://designsuperstars.net/10-cool-infinite-scrolling-effects-that-can-enhance-your-websites-navigation/
http://www.webdeveloperjuice.com/2012/05/26/10-aggressively-used-jquery-infinite-scroll-plugins-for-endless-paging/
http://social.technet.microsoft.com/Forums/el-GR/sharepoint2010programming/thread/c00d8727-5a83-437e-b88b-52372623ac57
http://hi.baidu.com/isina/item/a8eaa72d7b8a519eb7326330
http://freebiesdesign.com/infinite-scroll-jquery-plugin/
http://simplythebest.net/scripts/cat/106/Data-handling.html
http://www.htmldrive.net/items/show/1189/Useful-Scroll-Pagination-with-jQuery
http://archive.cnblogs.com/a/2430967/
http://thewebthought.blogspot.com/2012/01/jquery-loading-content-while-user.html


Plugin URL: http://andersonferminiano.com/jqueryscrollpagination/
Example of usage:
        $(function(){
            var page = 1; // page number  
        	$('#content').scrollPagination({
        		'contentPage': 'democontent.html', // the url you are fetching the results
        		'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
        		'scrollTarget': $(window), // who gonna scroll? in this example, the full window
        		'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
        		'beforeLoad': function(){ // before load function, you can display a preloader div
                    if($('#blocked').val() == 1) {
                            return false; /* Exit the function */
                    }else {
                        $('#blocked').val('1');
                        $('#loading').fadeIn(); 
                        this.contentData = {page:page}; // GET params for contentPage
                        return true; /* All ok proceed with function. Always return true or false */
                    }
        		},
        		'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                     // fade prompt
        			 $('#loading').fadeOut();
        			 $(elementsLoaded).fadeInWithDelay();
        
                     if(elementsLoaded.length == 0 ){ // stop load more, when no more content 
                        $('#nomoreresults').fadeIn();
                        $('#content').stopScrollPagination();
                     }
        
                     // block to wait next page request
                     $('#blocked').val('0'); 
                     page++;
                     // when content's height is too low, the scroll bar may not show at first time.
                     // so trigger scroll after load content. 
                     $(window).scroll();
        
        		}
        	});
        	
        	// code for fade in element by element
        	$.fn.fadeInWithDelay = function(){
        		var delay = 0;
        		return this.each(function(){
        			$(this).delay(delay).animate({opacity:1}, 200);
        			delay += 100;
        		});
        	};
        		   
        });


Thank you for using it!