Scrolling the window with the latest feeds

Question

I took a look at these three websites:

www.foursquare.com www.untappd.com www.getglue.com

since you can see that on the main page there is a scrolling of the most recent activity window. How to create something like this?

Is it jquery or what?

Answer 1

Having done this with javascript, you can use jquery to make it easier for yourself. Here is an example:

http://jsfiddle.net/tpmQj/

$(function(){
    setInterval(function(){
                  $("#wrapper").prepend($("<li>A new item</li>").hide().fadeIn());
    }, 4000); 
});

You can use a timeout or interval in conjunction with an ajax request that checks the database and returns new results, etc. The basic concept is simply adding new elements to the dom tree.

Answer 2

Loktar 4square: http://www.jsfiddle.net/8ND53/

var newitem = function(){
    var item = $('<div>')
        .addClass('item')
        .css('display','none')
        .text('This is a brand new item')
        .prependTo('#scroller')
        .slideDown();
    $('#scroller .item:last').animate({height:'0px'},function(){
        $(this).remove();
    });
}

setInterval(newitem, 2000);