News Ticker in 4 lines of jQuery

There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines of jQuery code ?

new-ticker-in-4-lines

Idea is pretty simple, take first element from list, apply some disappearing effect on it and on callback attach it to the end of the list.

First we have to create HTML with list of our news, something like this:

<ul id="ticker">
    <li>
        jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked.
    </li>
    <li>
        Learn how to create image gallery in 4 lines of Jquery
    </li>
    <li>
        jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
    </li>
    <li>
        mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph.
    </li>
</ul>

Now, let’s put some style on this. We will set height of our visible ticker area and set overflow to hidden. If we want only one news to be visible at the time than ticker height should be the same as height of each element of the list. For more visible news at same time we just have to multiply height of each element with number of news that we want to be visible and set that as height of ticker.

#ticker {
    height: 40px;
    overflow: hidden;
}
#ticker li {
    height: 40px;
}

Of course, you can and should add more style here, but this will be enough to make your ticker to work.

Ok, we have layout set and now it’s time for make this news to start ticking. First we will create function which will apply disappearing effect on first element, append that element to the end of the list after it disappear and revert effects changes. After that, all we have to do is to call that function in desired intervals.

new-ticker-in-4-lines-exp

And here is plain code:

function tick(){
    $('#ticker li:first').slideUp( function () { $(this).appendTo($('#ticker')).slideDown(); });
}
setInterval(function(){ tick () }, 5000);

Of course, you can change slideUp with any other animation that you like, just don’t forget to revert effects on element after transition. Next example will set opacity to 0 for first element.

function tick(){
    $('#ticker li:first').animate({'opacity':0}, 200, function () {
        $(this).appendTo($('#ticker')).css('opacity', 1); 
    });
}
setInterval(function(){ tick () }, 4000);

And please don’t forget to include jQuery at the head of your document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

That’s it, news ticker is done. Take a look at the demo, download source code or leave a comment.

  • Image gallery in 4 lines of code with MooTools and Dojo (8)
    Recently I wrote article how to create image gallery with description in 4 lines of jQuery code. Now, I will do the same thing with two other popular JavaScript frameworks, MooTools and […]
  • Create image gallery in 4 lines of jQuery (140)
    Few days ago friend asked me to build image gallery with thumbnails for her web page. Request was pretty simple, she wanted large image and few thumbnails bellow that. Also, large image […]
  • Visualize Twitter connections with Twings (3)
    I always find it interesting to see who from people that I’m following on Twitter follows me back and also to see how those people are related with each others. I was looking the best way […]
  • Animated Progress Bar in 4 lines of jQuery (48)
    Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is […]
  • jqBarGraph – jQuery graph plugin (157)
    jqBarGraph is jQuery plugin that gives you freedom to easily display your data as graphs. There are three types of graphs: simple, multi and stacked. All you have to do is to pass your […]

91 comments on "News Ticker in 4 lines of jQuery"

how do you make it show atleast 4 news articles? because there is only one news appearing…

clarhaeHEARTjongin on May 22, 2012 at 9:52 am

Mega cool post, just what I was looking for…. 😀

Tidy Design on May 17, 2012 at 7:27 am

Really useful post thanks,

How would you go about including the links within tweets?

Thanks in advance.

Nick on April 25, 2012 at 6:35 am

Frank, when you copy it verbatim from the blog, you get the wrong sort of a single quote mark. Just retype the ones around “#ticker li”, either as double quotes or as regular single quotes.

Abimbola and Steve – thank you!

Dror S. on April 18, 2012 at 8:41 am

That one doesn’t work firebug says incorrect character at
$(’#ticker li’).mouseenter(function() …..
^

I’m a java beginner, so any help would be accounted to “helping a blind”.

Frank

Frank on April 17, 2012 at 3:05 am

The last hover example by @Abimbola did not work for me. Also, I want the scroller to continue on mouseleave. Try this instead with the slideup effect:

$(‘#ticker li’).mouseenter(function() {
clearInterval(autoInterval, startTimer);
}).mouseleave(function() {
startTimer();
});
function startTimer(){
autoInterval = setInterval(function(){tick()}, 4000);
}
function tick(){
$(‘#ticker li:first’).slideUp( function () {
$(this).appendTo($(‘#ticker’)).slideDown();
});
}
startTimer();

Steve on April 13, 2012 at 3:05 pm

After much fiddling, I came up with this:

$(function(){
// Source: http://workshop.rs/2011/09/news-ticker-in-4-lines-of-jquery/

//First we will create function which will apply disappearing effect on first element, append that element to the end of the list after it disappear and revert effects changes. After that, all we have to do is to call that function in desired intervals.
startTimer();
$(‘#ticker’).hover(function(){clearInterval(autoInterval);}, startTimer);
});
var startTimer = function(){
autoInterval = setInterval(function(){tick()}, 3000);
};
var tick = function(){
$(‘#ticker li:first’).animate({‘opacity’:0}, 200, function () { $(this).appendTo($(‘#ticker’)).css(‘opacity’, 1); });
}

Abimbola on April 10, 2012 at 9:38 am

Good work! I put it to test and worked well. However, is there a way we can make it stop on mouseover.
Thanks again

Abimbola on April 10, 2012 at 2:21 am

Great code… Thanks alot.
Twitter news does not show up in IE 9. Can anyone help me out?

Kaan Karahan on March 27, 2012 at 9:10 am

great one, I just found one more ticker which uses no jquery just CSS3

Future of CSS3 is at our doors, why not use it?
http://webstutorial.com/css3-news-ticker-css3-notification-bar-stackexchange/css3

Rex on March 26, 2012 at 11:11 am

Thank you very much , Man , works fine with 3500 MSeconds :).

Khaled on March 25, 2012 at 6:45 am

a “stop scroll link” is less intuitive than an hover stop (most commonly seen).

phil on March 24, 2012 at 9:07 am

@kaviarasankk If you have five and you only want to show 3 and the ability to see all of them just put a link to “all news” with a webpage for that.

phil on March 24, 2012 at 9:06 am

Really nice and short, the only thing missing is the pause on hover. May be you could suggest me a link to add that?

phil on March 24, 2012 at 8:58 am

Thank you, your code it’s fantastic!

Just a question…

Is it possible to insert a link with a stop scroll?

If yes, how to make it?

Thank you in advance.
Fabri

Fabrizio on March 20, 2012 at 6:43 am

Good yaar
but if i m having some 5 news to scroll
and i wanna show only 3 news and thr should be one button below “view all” onclicking it should show all the 5 news and it should toggle regardly can u

kaviarasankk on March 16, 2012 at 1:43 am

exactly what i need !
Thanks a lot

Benj on February 17, 2012 at 5:51 am

Best code ever.

Angel on February 8, 2012 at 11:48 am

opps – I didn’t copy all the code. Now it looks great. Sorry! And Thanks again!

Jenny on February 8, 2012 at 11:25 am

Hi – thanks for this. It looks and works beautifully in Chrome, but is choppy and annoying in IE. Any suggestions?

Jenny on February 8, 2012 at 11:20 am

sorry guys am new to these languages​​, in which position should put the codes? I have tried it and it does not work .. thanks a lot for the answer

ash on January 5, 2012 at 6:39 pm

It is really cool, I will try it on my blog. Actually I want to learn this all.

Madhav Tripathi on December 11, 2011 at 12:18 pm

Very cool. I needed to be able to do just this and it’s great that I didn’t have to reinvent the wheel. One observation: you can make the code even more compact—instead of passing an anonymous function to setInterval, just pass the name of the function you want to call:

setInterval(tick, 5000);

Michael Kropat on November 11, 2011 at 2:16 pm

Really “compact” code, thank you 😉

Gleenk on October 21, 2011 at 4:01 pm

Comments are closed.