A jQuery Horizontal Scrolling News Ticker CodeUnit 18 JAN 2010

Gian Carlo Mingati has made life particularly easy for you if you are in search for a simple to implement, yet powerful and customizable side-scrolling (in other words horizontal) news ticker widget.

His liScroll jQuery plugin takes any old unordered (ul) list with a unique ID and transforms it into a simple side-scrolling news ticker that has a variable speed control and also actually pauses on mouseover events, making navigation from the bar particularly easy.

To use his creation, simply do the following:

First create your necessary markup, e.g.:


Next, apply the jQuery magic to it:

$(function(){
$("ul#ticker01").liScroll();
});

That’s it, all done. And if you want to control the scroll speed, simply modify the travelocity parameter as follows:

$(function(){
$("ul#ticker02").liScroll({travelocity: 0.15});
});

You can grab Gian’s useful bit of code here: http://bit.ly/hNelh

Note: Don’t forget to copy off the required liScroll style declarations embedded in the demo page. Without them the ticker won’t actually work – which leads to a lot of unnecessary frustration I tell you! ;)

Related Link: http://bit.ly/hNelh

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.