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.:
<ul id="ticker01"> <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> </ul>
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