So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.

So here is what's going on. I have an html doc called "home.html". It contains many divs, each of these divs is a single post. I also have an index.html and in the it there is a div #content. The content is empty in the index.html but it gets filled with the divs in home.html through .load() call. Also, using div:nth-child(-n + 10) in the .load call I can have it only load the first ten posts. How can I use waypoint.js to add infinite scrolling to this? So that once the scroll bar reaches 75% of the way to the bottom, it loads the next 10 divs from home.html.

• javascript
• jquery
• ajax
• scroll
• infinite

• You should rather say "10 elements from the bottom" than "75%", because the longer the page grows, the more often you would request elements from the server. It should stay constant. – Bergi Commented May 23, 2012 at 17:38

2 Answers 2

After you load the 10 elements on the page, wire up a jquery waypoint that will trigger an action.

The first step of the action will be to disable to waypoint (so it only fires once). Then have it load additional data via ajax and render that on the page. After (via callback) that is done, you'll reactivate the waypoint so that the process will start anew when the user scrolls down to it.

Your application will have to keep track of how many and what elements are loaded, so your ajax requests request the correct numbers (i.e. 10 are loaded, so the next request should start at 10 and fetch 10, next should start at 20 and fetch 10, etc).

The "75% of the way to the bottom" is easily configurable in waypoint. You'll use the "offset" for that.

Check out the waypoint documentation

I put the DOM element that triggers my infinite scrolling underneath of the main grid that I have, so as I load more content, it automatically pushes it down.

I used jquery masonry+waypoint js..But if you dont register waypoint in masonry callback, it will load the items that es with your ajax call more than once..Here is my solution;

//INFINITE SCROLL
    var $loading = $("#itemsloading"),
    $footer = $('footer'),
    opts = {
        offset: '120%',
        onlyOnScroll:false
    };

    $footer.waypoint(function(event, direction) {
        $footer.waypoint('remove');
            $loading.toggle(true);
            $.get($('.more').attr('href'), function(data) {
                var $data = $(data.result[0]);  
                if($(data.result[0]).length==0){
                    $loading.toggle(false);
                    return false;
                }
                $('#items').append( $data ).masonry( 'appended', $data, true, 
                        function(){
                            $footer.waypoint(opts);
                            });
                $loading.toggle(false);
            }); 
    }, opts);