Question

I have this code that will check for if the class more-results are in the viewport. And when it is it runs the ajax request.

    $(window).scroll( function() { 
        if ($("a.more-results:in-viewport").each(function()  {

            $.ajax({  
              type: 'GET',  
              url: $(this).attr('href'),
              data: args,
              success: function(response) {
                response = $.trim(response);
                if($('#more-results-link').length){
                    $('#more-results-link').remove();
                } else {
                    $('.more-results-link:visible').remove();
                }
                var $responseHTML = $(response).appendTo(ajaxElement);
                $responseHTML.find("input:checkbox").uniform({useID: false});
              }

            });

        }));
    });

and this works.. but… it fires several requests when scrolling…

Answer 1

I think you should have a look at the jQuery Masonry Plugin.. It allows you to create an infinite page scroll effect like we see on Facebook wall…