Dynamic feed using Jquery and Ajax

Question

Hello guys, I have a newbie question...

Look at the Recent Activity Panel of this website:

http://barcodehero.com/

Looking at the source code, I can see how they are animating the feed. But where are the ajax calls? How can something like this be implemented. I am sure this is very easy. But not for me ..

Here's how they are animating their feed:

<script type="text/javascript"> 
      var delay = 2500;
      var numCardsDownloaded = 200;
      var numCardsToShow = 5;
      var nextToShow = numCardsDownloaded - 1;


      function animateFeed() {
        toHide = (nextToShow + numCardsToShow) % numCardsDownloaded
        $('#activity'+nextToShow).remove().prependTo('#activity-list').slideDown(1000);
        $('#activity'+toHide).slideUp(1000);
        nextToShow = (nextToShow + numCardsDownloaded - 1) % numCardsDownloaded
        setTimeout('animateFeed()', delay);
      }    

      $(document).ready(function() {
        setTimeout('animateFeed()', delay);
      });
    </script> 

Answer 1

The site is not actually making any AJAX calls. They have 200 "updates" loaded on their site and are just rotating them. If you are looking for a simple way to make AJAX queries, check out http://api.jquery.com/category/ajax/

Answer 2

They are not making ajax calls to update the list. Check the source code and you will see all the posts in HTML, they are all just hidden and then animated. You can find out more about jQuery (the library used to animate) which also include ajax functions at: http://www.jquery.com