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"

Thanks, good news tick

yaniv shmuel on December 16, 2012 at 6:24 pm

Works a charm. Thanks for posting!

Web Design on December 6, 2012 at 11:29 am

Wow, simple but really usefull for my design… Thanks a lot…

kentooz on December 1, 2012 at 5:13 pm

Hi

just put this ticker in my sidebar. Thanks for your help!

Best

Lisa @ Hochzeit & Trauung on December 1, 2012 at 12:34 pm

Indeed the BEST and simple tutorial !
Thanks a lot. I was searching for the same one.
Once again … Thanks a lot.

GMAC on December 1, 2012 at 11:54 am

Thank you so much!
How do i pause the ticker when mouseover?

Vong on November 19, 2012 at 5:48 pm

Great news ticker. Congratulations. Do you have any idea how I could add a mouseover stop function and mouseout run function. Thanks

Mathieu on November 9, 2012 at 9:23 am

whoops.. it put a “?” in there, within the standard html.body./body./html

J James on November 5, 2012 at 12:33 pm

I can follow the code for this, I just don’t remember how to implement this on my server: What do I name the html and css files? Where do I position the script and html within the standard ? I’m using a dreamhost server where I just save the html/css files on the server, thanks for any help.

J James on November 5, 2012 at 12:32 pm

You should also remove() the element you’re appending or you’ll end up with a severe memory issue.

Piers Johnson on September 24, 2012 at 11:26 pm

For people who what to scroll down instead of up for ticker 02, like me, use the below function

function tick2(){

$(‘#ticker_02 li:last’).slideUp(function () {

$(this).remove();
$(“#ticker_02”).prepend($(this));
$(this).slideDown();
});
}
setInterval(function(){ tick2 () }, 3000);

MK on August 31, 2012 at 3:40 am

How can i put a button on it ? a preview and next button. please help me , my email jefferson.a.abreu@gmail.com

Jefferson Abreu on August 26, 2012 at 12:25 pm

soy un novato en jquery, me parece muy bueno el ejemplo, pero como haria en el caso de que quiera que se detenga cuando ponga el cursos ensima de alguna etiqueta o una etiqueta .
Gracias y Saludos.

Oscar on August 26, 2012 at 11:48 am

Wow man… thats cool. took it and made a wordpress widget out of it šŸ™‚

Sagive on August 26, 2012 at 9:18 am

Did a little refinement:

(function ticker(){
$(‘.news-ticker li:first’).slideUp( function () { $(this).appendTo($(‘.news-ticker ul’)).slideDown(); setTimeout(ticker, 5000); });
})();

This avoids setInterval as it can cause problems in the browser when the operation has not completed yet.
It references a function inside the Timout call instead of creating a new function everytime.
Its wrapped in a self-executing function so it doesn’t pollute the global namespace.

JanB on August 15, 2012 at 5:07 am

thank you for this.

farhadfery on August 6, 2012 at 5:49 am

How do i pause the ticker when mouseover? Thanks.

Fazlee on August 5, 2012 at 10:07 am

Great news scroller! Thank you for this.

There was a question about stopping the scroller on hover. Is there already a solution for this? It would be great if the scroller could stop on hover.

Webdesign on August 2, 2012 at 4:30 am

@clarhaeHEARTjongin: took me a while to figure that one out too. the author left out that bit of info.
I just kept playing around with it until i got something that worked.
make sure the id for the ul containing the news ticker is ticker_02 with a class called ticker. You can then tweek the look and feel with the ticker class.

Then I think the function should be named tick2 (not sure if this matters though).

this is what i used, and it worked well showing 4 lines at once.

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.
Learn how to create image gallery in 4 lines of Jquery
jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.
mooBarGraph is AJAX graph plugin for MooTools which support two types of graphs, simple bar and stacked bar graph.

function tick2() {
$(‘#ticker_02 li:first’).slideUp(function () { $(this).appendTo($(‘#ticker_02’)).slideDown(); });
}
setInterval(function () { tick2() }, 3000)

CSS
#ticker {
height: 400px;
overflow: hidden;

}

.ticker li {
height: 60px;
border-bottom: 1px dotted #DDD;
padding: 5px;
margin: 0px 5px;
}

Seangabe on July 18, 2012 at 6:13 am

Nice Post….Thanks šŸ™‚

Creative Hero on July 13, 2012 at 3:31 am

Thanks for this elegant solution to a common problem. šŸ™‚

Sheppe on June 25, 2012 at 7:09 pm

Pretty nifty. Change slideUp/slideDown with hide/show respectively for a different effect.

Brad on June 22, 2012 at 9:49 pm

Most easiest news ticker with jQuery. thanks i love it, keep it up

yogs on June 4, 2012 at 5:36 am

Leave a Reply

Your email address will not be published. Required fields are marked *