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.:


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

Related Posts:

  • If for instance you have just used a jQuery selector to grab a whole lot of objects and now realize that in actual fact you only want to effect the first object that the selector returned to you, you can rest easy in the knowledge that jQuery as per usual has you covered. Now jQuery 1.4 has gone and simplified the ...

  • You'll often find yourself using frameworks that may be running a number of different javascript libraries such as MooTools, jQuery and ProtoType (depending on the various involved developers' plugin preferences of course), which leaves you with the interesting quandry of what to do with the shared $ variable tha ...

  • The Accordion jQuery UI widget is a great way to present lots of data in a limited space through the use of collapsible panels. If your panels are fairly large, or perhaps you have a quite a few of them in the accordion, then sometimes it would be nice to use a row of central links or buttons to trigger the coll ...

About Craig Lotter

South African software development manager and senior application developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

34 thoughts on “A jQuery Horizontal Scrolling News Ticker

  1. 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.

  2. 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.

  3. You could probably rewrite the script to load the list elements into an array and then shuffle the array before spitting them out, but I don't believe there is a native way of doing it with Gian Carlo Mingati's original code…

  4. Thanks, I love this ticker! I’m having 2 major problem with it.

    1. There’s a delay before the ticker resets itself….

    2. I’ve been spending 7 days trying to figure out how to get tooltips on hover to show. I would love to get tooltips to mimic the trending topics ticker on Twitter.com. I tried several different plugins and have not had any luck getting the information to display the way I want it to.

  5. Thanks for the ticker. I love it. Anyway, is there any way to make it scroll reverse? for example, by clicking on a reverse button, it will go reverse?

  6. Hi Admin, this is really great plugin, Can related tooltips also be added to each news, which occur when we over on the news text?

  7. Hello, great plugin!

    One suggestion, if you are trying to use this with images, make sure you wrap the code in a $(window).load(). Otherwise the ticker function will not take the image widths into account.

    Thanks!

  8. How would you go about making et start over when the last element has entered the div? As it is now the whole list of li-elements has to pass by before et loops over :-) Hope you can help with this! :-) otherwise its great and simple!

  9. Good discussion!

    “WP Easy News Scroller” Plugin is a jquery based wordpress plugin which is used to show the wordpress news or relevant posts with various sliding effects and sixteen (16) different Themes. It can be integrated in the sidebar or footer area on your Blog or Website. WP Easy News Scroller Plugin adds latest news with Title, Image and Description. One can easily install and setup the plugin into the WordPress site. This plugin is compatible up to WordPress Version: 3.5.1

    http://codecanyon.net/item/wp-easy-news-scroller/4063270

  10. Hello Everyone!

    I have a good news that I’ve noted an incredible plugin intended for WordPress News Sliding known as “WP Easy News Scroller”

    http://codecanyon.net/item/wp-easy-news-scroller/4063270

    “WP Easy News Scroller” Plugin is a jquery based wordpress plugin which is used to show the wordpress news or relevant posts with various sliding effects and sixteen (16) different Themes.

    Excellent plugin. Works great

Leave a Reply