No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scripts
README
democontent.html
index.html
jqueryscrollss.jpg
scrollpagination_demo.css

README

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!