Clever Geek Handbook

JQuery scrolling reveals hidden content

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

If you see this example , it has multiple divs. I want only 6 of them to be displayed initially, and every time the user reaches the bottom of the page, I want six more to load until you finish the "div".

So far I've tried experimenting with jQuery infinite scroll plugins, but they don't apply in my case, as in fact the number of elements I have is very limited!

How can this be done with jQuery? Thanks in advance!

EDIT

I believe it would be possible to hide the remaining divs (other than the first 6) and call a function that loads another six when the bottom of the page is reached.

+3


source to share


4 answers


I created a very quick example that is not optimized for the job:



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

+11


source


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 may need to play with loadHeight

for it to work to your satisfaction.

EDIT: I added haveDivsToLoad

to the check. You have to make it a global (or closure) variable and set it to true

or false

whichever is more loaded div

.

+1


source


Suppose you have an array of divs, each initialized with document.createElement("div")

or similar. Let's say 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++]);
        }
    }
});
+1


source


After a little experimenting, I found a great answer:

http://jsfiddle.net/jackdent/gRzPF/12/

0


source






More articles:


All Articles