CODEWITHSUNDEEP
jquery
aherlambang
aherlambang

Reputation: 14418

scrolling down box with most recent feeds

I've taken a look at these three websites:

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

as you can see the main page has a scrolling down most recent activity box. How do I create something like this?

Is this jquery or what?

Upvotes: 3

Views: 1854

Answers (2)

Brad Christie
Brad Christie

Reputation: 101604

In addition to Loktar's version, this is more similar to 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);

Upvotes: 4

Loktar
Loktar

Reputation: 35309

Its done with javascript, you can use jquery to make it easier on yourself. Heres a quick example

http://jsfiddle.net/tpmQj/

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

You could use a timeout, or an interval, coupled with an ajax request, that polls a database and returns new results etc. The basic concept is just appending the new items to the dom tree.

Upvotes: 4

Related Questions