jQuery scroll show hidden content

Question

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 accomplished 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.

Solution 1

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

http://jsfiddle.net/gRzPF/2/

Solution 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.

Solution 3

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++]);
        }
    }
});