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:

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.

  • Damian

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

  • Damian

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

  • http://www.craiglotter.co.za Craig Lotter

    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/

  • http://www.craiglotter.co.za Craig Lotter

    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/

  • Idiots on idiots

    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.

  • Idiots on idiots

    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.

  • http://www.craiglotter.co.za Craig Lotter

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

  • http://www.craiglotter.co.za Craig

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

  • http://www.jengraphdesigns.com/clientfiles/synergy Jennifer Niles

    I am trying to get this work on this website above…I’m not sure what I am missing. Can you advise? I would really appreciate this! Thanks in advance.

    Jennifer Niles

  • http://www.jengraphdesigns.com/clientfiles/synergy Jennifer Niles

    I am trying to get this work on this website above…I’m not sure what I am missing. Can you advise? I would really appreciate this! Thanks in advance.

    Jennifer Niles

  • http://www.craiglotter.co.za Craig Lotter

    Hi Jennifer. Looking at the site in Firefox, the scrolling ticker tape seems to be working fine on the site? what exactly isn’t working?
    .-= Craig´s last blog ..And so the Quest to Become a Father Begins =-.

  • http://www.craiglotter.co.za Craig

    Hi Jennifer. Looking at the site in Firefox, the scrolling ticker tape seems to be working fine on the site? what exactly isn’t working?
    .-= Craig´s last blog ..And so the Quest to Become a Father Begins =-.

  • Renee

    Does anyone have an idea as to how I can get the list items to appear in a random order? Thanks!

  • http://www.craiglotter.co.za Craig Lotter

    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…

  • Dasd

    qwqwq

  • Iopl

    7878978

  • http://twitter.com/EgyptPackages EgyptTravelPackages

    i will try to use it on my new website

    http://www.egypttravelpackages.net

  • http://twitter.com/EgyptPackages EgyptTravelPackages

    wow very nice i will try to use it also on http://www.egyptwebsolutions.com

  • Iamdavidstone

    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.

  • Andrew

    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?

  • http://www.quali-x.de Info

    Reall nice info…

  • http://www.quali-x.de Info

    Reall nice info…

  • http://twitter.com/EgyptTravel2020 Marvelous
  • http://www.swiftminibushire.co.uk Jim

    I have been looking at adding a new ticker to this site http://www.swiftminibushire.co.uk I think this is just what I have been looking for, will give it a try.

  • http://www.lewaterina.com Hotels chennai

    Nice jquery . thanks for sharing .

  • jia

    i am finding this very useful but as i am new to programming then plz tell me that where should i copy this code?

  • Pingback: Top 15 jQuery Scrolling Plugins | jQuery4u()

  • Jona

    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?

  • Zamhick

    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!

  • Steffen h

    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!

  • http://www.newtlabs.co.uk Steven

    Nice and simple old school news ticker and works well with responsive design too.. cheers!