Pseudo-Continuous Scrolling

Question

I would like to display a large number of results without multiple "pages" to load results "0-99" on page 1, "100-199" on page 2, "200-299" on page 3 etc.

Thus my idea is to create a sort of pseudo-continuous scrollable data list. So essentially, data would be loaded as necessary but only if scrolled to. The box of data would then would have need to have a logical sort of scrollbar (I'm not sure how I would do that at this point - perhaps just with arrows). Also, if massive amounts of data are loaded then I imagine that old data would need to be cleared from memory so as not to kill a browser. How would one do all this in a web interface using jquery (or any javascript) on the client side and php

Answer 1

You mean something like SortFolio? You can bind to the scroll event with jQuery just like any other. You'd then be looking at a series of xml get requests to bring in data, and either append or prepend the list, depending on if the scrolling went up or down.

Answer 2

Ben Nadel did something quite similar on his blog (admittedly in CF, not PHP, but the server-side code is really short) using JQuery.

http://www.bennadel.com/blog/1803-Creating-A-Bidirectional-Infinite-Scroll-Page-With-jQuery-And-ColdFusion.htm

The nice thing about Ben's implementation is that it clears stuff you scroll past... meaning you don't run into that infinite DOM problem.

Answer 3

jQuery Tools has a demo of their Scrollable widget that sounds kind of like what you're describing.

Answer 4

well it will probably get rather complex when you get into it but basically something like this...:

// PSEUDO CODE
$(document).ready(function(){
  $('#datascroller').scroll(function(){
      var tbl = $('table', this);
      var $this = $(this);
      if($('td:last', tbl).scrollTop() == tbl.height()*-1)
      {
         //clear current data and display loading animation
         tbl.fadeOut('fast', function(){
            $(this).replaceWith(loadingAnimationElement.hide());
            loadingAnimationElement.fadeIn('fast');
            $.get('/phpscript.php', {page: 2}, function(results){
               var $data = $(results).hide();
               loadingAnimationElement.fadeOut('fast', function(){
                  $(this).replaceWith($data);
                  $data.fadeIn('fast');
               })
            });
         });
      }
  });
});