Posted By

FatFolderDesigner on 01/23/11

Tagged

Versions (?)

Last Edited at 01/23/11 05:55pm

Statistics

Viewed 1345 times

Favorited by 4 user(s)

Related snippets

Simple Content Load on Scroll

/ Published in: jQuery

Simple jQuery script to load additional content when you near the bottom of the page, same sorta thing Twitter does (although I originally programed it for a different use). Only thing of remark is the fact that it stores the current highest loaded value in a hidden variable, that way, fi the scrip dies or the user does not ave javascript enabled you can use that variable to load the next set of content up through traditions POST/GET methods.

I also have a version of the script that does not use jQuery if anybody is interested (although it is much larger and not as smooth).

Example is available at the link.

UPDATE: A commenter (on my site at the link) noted that there was a problem with the Content load on Scroll with jQuery example in Firefox 5 for windows and linux, and before I could even get off work to take a look he posted a fix.

The problem has to do with the browsers cacheing system. When you reload the page it keeps the cached value of the hidden input that keeps track of how far youâ€™ve scrolled, so when you reloaded it would display the initial 50, then jump to wherever you were. The solution is simple, you just need to reset that value once the page is loaded, so that it will overwrite any cached data your browser may be using. The code he posted is as simple as it gets and has been added to the source. You could also fix this by playing with how browser cache your site, but since they usually get the right this seems like a better solution to me.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

var loading = false;
$(window).scroll(function(){
    if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){
        if(loading == false){
            loading = true;
            $('#loadingbar').css("display","block");
            $.get("load.php?start="+$('#loaded_max').val(), function(loaded){
                $('body').append(loaded);
                $('#loaded_max').val(parseInt($('#loaded_max').val())+50);
                $('#loadingbar').css("display","none");
                loading = false;
            });
        }
    }
});
 
// Update code, simple add or integrate this.
$(document).ready(function() {
    $('#loaded_max').val(50);
});