Return to Snippet

Revision: 39950
at July 16, 2011 11:22 by FatFolderDesigner


Updated Code
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);
});

Revision: 39949
at January 23, 2011 17:55 by FatFolderDesigner


Initial Code
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;
            });
        }
    }
});

Initial URL
http://fatfolderdesign.com/173/php/content-load-on-scroll-with-jquery

Initial Description
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.

Initial Title
Simple Content Load on Scroll

Initial Tags
ajax, javascript

Initial Language
jQuery