kokorodo / jquery-scroll-pagination Goto Github PK

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(){
                $('#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
                        $('#loading').fadeIn();
                    },
                    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                         $('#loading').fadeOut();
                         var i = 0;
                         $(elementsLoaded).fadeInWithDelay();
                         if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                            $('#nomoreresults').fadeIn();
                            $('#content').stopScrollPagination();
                         }
                    }
                });

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