Using infinite scroll w/ a MySQL Database

Question

I found a nice ajax/jquery infinite scroll plugin ( http://hycus.com/2011/03/15/infinite-scrolling-like-new-twitter-with-php-mysql-jquery/ ) that I was able to mold well to

Answer 1

Would the above code example with the following mods work to trigger the function at a fixed height from the bottom??

Add:

var trigger = $('#postswrapper').height() - 250;

And change:

if (st >= 0.7*h && !loading && h > 500) {

to:

if ((st == trigger) && (!loading) && (h > 500)) {

Answer 2

Your "if" condition is only satisfied the first time you scroll. So essentially, the event is getting fired, not when you scroll to the bottom of the page, but when you start scrolling. Replace your code with the following:

<script type="text/javascript">
    var loading = false;

    $(window).scroll(function(){
        var h = $('#postswrapper').height();
        var st = $(window).scrollTop();

         // the following tests to check if 
         // 1. the scrollTop is at least at 70% of the height of the div, and 
         // 2. another request to the ajax is not already running and 
         // 3. the height of the div is at least 500. 
         // You may have to tweak these values to work for you. 
        if(st >= 0.7*h && !loading && h > 500){
            loading = true;
            $('div#loadmoreajaxloader').show();
            $.ajax({
                url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                success: function(html){
                    if(html){
                        $("#postswrapper").append(html);
                        $('div#loadmoreajaxloader').hide();
                    }else{
                        $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                    }
                    loading = false;
                }
            });
        }
    });
</script>