views:

438

answers:

1

Hi,

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.

A: 

$.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!

josh3736
thanks for your response, but the problem with this solution is that the height is not fixed, it varies based on contents in the breadcrumbs div tag.
okay!! i got it, used hide instead of height. so basically did this...$feed.hide();$feed.slideDown();Thank you very much.