How to make a real-time jquery effect?

Question

Hi,

i want to make a real-time feed reader, and i want a solution to make the new items coming without refreshing the page and with a scrolling effect like friendfeed.

you can see what i'm talking about here: http://www.vimeo.com/4029954

I just want a function which i can call with new DIV content and then it create it above the previous DIVs with the effect.

Note: i already have the ajax and settimeout functions, means that i have the new feeds content to be added, so what i'm looking for is the effect and function to add new divs with scrolling effect!

Thanks

Answer 1

Hi!

Here are some techniques which can help you further, but you should do the research yourself after this:

• Comet for streaming data over a persistent HTTP connection. Quite real-time. http://en.wikipedia.org/wiki/Comet_(programming)
• AJAX Polling sending a request to a HTTP, which is also a persistent connection, but closes after data is present. Then you'd need to reopen the request for new data. http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller

Answer 2

As you want the function that you call with new DIV content then I assume that you already did AJAX request.

Then to add the content to the site: If you are matching the container of all entries then you'll need http://docs.jquery.com/Manipulation/prepend#content, if you're matching the first entry you'll use http://docs.jquery.com/Manipulation/before#content.

If you want nice slide down effect just use ... wait-for-it ... yes, slide down function :) http://docs.jquery.com/Effects/slideDown

Answer 3

Use the JavaScript setTimeout function to regularly call a function. This function should then call one of jQuery's AJAX Functions, for example $.load.

Answer 4

I think you might be looking for something better than the slideDown() effect. That isn't quite right as it just increases the height of an object rather than making it appear to "scroll" into view. Check out the show() effects from jQuery UI. http://jqueryui.com/demos/show/#option-effect I imagine the "Slide" effect would be appropriate if you gave it the option to slide vertically. The "Drop" effect sounds like it would be right, but I get the same effect as "slide" when I try it. Perhaps that is a bug in the demo site at the moment.

You may also be interested in using the animate() method to animate the top property of an element so that you can 'scroll' it into view. You'd need to have a container with overflow: hidden and a set height and width with position: relative set. Then, an inner container with position: absolute which you can then animate the top property of with jQuery.animate().

var $items = $("#scroller .inner *");
$('#scroller .inner').animate({
    top: '-' + Math.round( $items.length * $items.eq(0).outerHeight(true) ) + 'px'
  });

Note that if you know how many pixels tall each inner element would be, you could replace the $items.eq(0).outerHeight(true) with the integer value of the known height.