Question

I am trying to develop auto horizontal scrolling for our website using – jQuery.ScrollTo / jQuery.SerialScroll. I am not sure if this is the best jquery library to do that, but if there’s something better, please let me know.

Here’s the behavior that I want, check out foursquare’s “Recent Activity” list. The data that will refresh will come from a ajax request that I make every few seconds using window.setInterval. I am not really a CSS/java script guy so I havent been able to figure out jQuery.SerialScroll.

Here’s the website – look at the “Live job Feeds” list. Currently the list does refresh the data coming from the ajax call, but I dont see the effect, the animation, in fact I dont even think serialScroll is being used. Right now I am doing a – $(‘#feed-ticker’).prepend(content) to pre-append the newly arrived data.

You can do a view source to look at the current code.

Any help would be really appreciated. Thanks.

Answer 1

$.scrollTo() (and by extension, the SerialScroll plugin) adjusts the position of the browser’s scrollbar. For example, $(document).scrollTo() is great for smoothly scrolling to a different spot on your document. (You can, of course, also adjust the scroll position of a block element with the style overflow:auto or overflow:scroll.)

Eyeballing the site you linked to, it looks like they’re not using scrollTo() to achieve the animated new item behavior. Rather, the containing block’s style is set to overflow:hidden and the new items are created with a height of zero. Once inserted in to the page, the new item’s height is then animated to 75px (or whatever). This might be a better approach for you to take.

Assuming content is a jQuery object:

content.height(0);
$('#feed-ticker').prepend(content);
content.animate({
    height: 75 // or whatever your target height is
}, 500); // animation's duration in milliseconds

Magic!