View Full Version : horizontal news ticker w/ jQuery (marquee kind of thing)

11-24-2009, 12:28 PM
Iím currently trying to put a horizontal news scroller on a page and since Iím using jQuery already I wanted to have something using this framework. However, all I found so far isnít 100% satisfying for me so far.

The best I could find was liScroll (http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html) which works but makes me a little suspicious as the script hasnít been updated since 2007. OK, this could as well be a sign that the script is perfect and it is working in all major browsers but it has a huge gap after the last news item has passed. I would like it to be completely circular, i. e. the first news item should come right after the last one again without huge gap. Does anybody know what I would have to modify? I canít for the life of me find whatís causing the gap.

I also tried to modify the news ticker script on http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/ (to make it horizontal) and it works perfectly in Firefox if I change all marginTop and height occurrences to width and marginLeft but IE refuses to accept this (i. e. doesnít scroll).

The last option I tried was to use scrollable (http://flowplayer.org/tools/scrollable.html)ís autoscroll plugin but it doesnít work as smoothly as the other ones and I think itís not so well suited for this purpose.

So Iím totally grateful for any help you can give me.

11-25-2009, 12:20 PM
The best I could suggest is jCarousel (http://sorgalla.com/jcarousel/) - there's a couple of examples of setting it to autoscroll (http://sorgalla.com/projects/jcarousel/examples/static_auto.html)and making it look truly circular (http://sorgalla.com/projects/jcarousel/examples/special_circular.html). I suspect that you'll be able to muck about with the timings on that to make it a fairly smooth and seamless news scroller, but yeah it's not really designed for it.

11-25-2009, 03:42 PM
Instead of a "circular" horizontal scroller, consider a "circular" rolling one:



The only way I know to make a "circular" horizontal scroller is letter by letter. Remove a letter from the left, append it on the right. It's choppy, but it works.

I have an example of that, if interested contact me, and I'll send it to you.