How do I make it so that by default, 6 div elements are shown on the page, and when a user scrolls to the bottom of the page, six more are loaded?

If you see this example, it has multiple divs. I want only 6 of them to be show initially, and each time the user reaches the bottom of the page, I want six more to be loaded, until you 'run out' of divs.

So far I have tried experimenting with jQuery infinite scroll plugins, but they are not applicable in my case, as in fact the number of elements I have is very finite!

How can this be acplished using jQuery? Thanks in advance!

EDIT

I believe one could set the rest of the divs to hidden (apart from the first 6), and trigger a function that loads six more when the bottom of the page is reached.

How do I make it so that by default, 6 div elements are shown on the page, and when a user scrolls to the bottom of the page, six more are loaded?

If you see this example, it has multiple divs. I want only 6 of them to be show initially, and each time the user reaches the bottom of the page, I want six more to be loaded, until you 'run out' of divs.

So far I have tried experimenting with jQuery infinite scroll plugins, but they are not applicable in my case, as in fact the number of elements I have is very finite!

How can this be acplished using jQuery? Thanks in advance!

EDIT

I believe one could set the rest of the divs to hidden (apart from the first 6), and trigger a function that loads six more when the bottom of the page is reached.

• javascript
• jquery
• html
• css
• scroll

• You should do exactly that. Trigger an event when the user reached the bottom and on this event, the next divs are loaded. – Johannes Klauß Commented Apr 5, 2012 at 22:03

4 Answers 4

I have created a very quick example, it's not optimised by does the job:

http://jsfiddle/gRzPF/2/

You should be able to use something like the following:

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

You might need to play with loadHeight to make it work to your satisfaction.

EDIT: I added haveDivsToLoad to the check. You should make this a global (or closure) variable and set it to true or false depending on whether there are more divs to load.

Lets assume you have an array of divs each initialized with the document.createElement("div") or similar. Lets assume you have a large array of them.

var myArrayOfDivs = [];//see above
var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        for(int i = 0; i < 6; i++){
         if( myArrayOfDivs.length < DivsAdded ) break;
         $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]);
        }
    }
});

After a bit of experimenting, I found the perfect answer:

http://jsfiddle/jackdent/gRzPF/12/