Question

Basically I have a jQuery function that checks if the user is near the bottom of the page and loads more stuff. When the document loads this is ran, to check.

<script type="text/javascript">
$(document).ready(function() {

    var number = 5;
    offset = 0;

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {

            $(".empty-div").append().load('<?php bloginfo('template_url'); ?>/ajax.php?offset='+offset+number, function() {

                    var offset = offset+number;             

                    setTimeout(function(){ console.log('after', $(document).height()); }, 0);
                    setTimeout(function(){ console.log('after', $(window).height()); }, 0);



            });     

        }

    });

});
</script>

H/e whenever I reach the bottom of the page on the second go, it doesn’t redo the load function. It does work the first time, by the way. Any ideas how to remedy this? The console stuff is there to recalculate the heights, just in case that’s what’s causing it.

Answer 1

1. you use load() there on $(“.empty-div”), this would’nt add more content, it will replace the content(if the response does’nt change, you will see no change)

   It better should be something like

   $('<div/>').appendTo(".empty-div").load(/*****/)
   

2. maybe there also is a problem with the DOCTYPE. Log

   $(window).scrollTop(),  $(window).height() and  $(document).height() 
   

   maybe, it differs between standards – and quirks-mode.