Question

Does anyone know if there is a common javascript library to enable scrolling that many popular websites do for frequently updated content? For example : http://foursquare.com/ has a good example of what I am looking for, I thought I’d save myself the trouble if there is a common js library I cannot seem to query for correctly in google.

Answer 1

I like that effect. It seems like it’d be trivial to do using JQuery. Couldn’t you just append a hidden div to the page when you get new content, then use slideDown function?

Actually, after looking at the source that’s exactly how they’re doing it:

<script type="text/javascript"> 
      var delay = 5000;
      var count = 30;
      var showing = 10;
      var i = 0;
      function move(i) {
        return function() {
          $('#recent'+i).remove().css('display', 'none').prependTo('#items');
        }
      }
      function shift() {
        var toShow = (i + showing) % count;
        $('#recent'+toShow).slideDown(1000, move(i));
        $('#recent'+i).slideUp(1000, move(i));
        i = (i + 1) % count;
        setTimeout('shift()', delay);
      }    
      $(document).ready(function() {
        setTimeout('shift()', delay);
      });
    </script>