A jQuery Horizontal Scrolling News Ticker

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

This entry was posted in Technology & Code and tagged , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Related Posts :

4 Comments

  1. Damian
    Posted February 3, 2010 at 13:45 | Permalink

    Thanks for the post. Unfortunatly the code has some bugs in IE8.

  2. Posted February 3, 2010 at 13:53 | Permalink

    Strange. Works fine for me in IE8. Did you try taking all the associated styles off the demo page and work with them? Find that bit of customisation is by far the most important to get it working – for an example of where I used it: http://www.espreports.com/magretail/

  3. Idiots on idiots
    Posted February 17, 2010 at 15:02 | Permalink

    The guy is an idiot, and so are you.

    His site doesn’t mention anything about the stylesheets (but of course I knew it could need some, magically wrapped up in the javascript perhaps? no) and doesn’t give ANY INDICATION, nor does he give a CLEAN demo page or zip or a link to a minimal style sheet.

    And you ALSO fail to mention this fucktardery, except in your faggot comments.

  4. Posted February 17, 2010 at 15:09 | Permalink

    Well, at least you managed to figure it out all by yourself it would seem, so you may as well give yourself a pat on the back then, no?
    Craig´s last blog ..Wissing Weber My ComLuv Profile

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

CommentLuv Enabled

Subscribe without commenting

 
Your Ad Here
Afrigator   Sorted bru, tagged by Amatomu.com