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 […]

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

I see the global.css but mt pages template is overriding the global.css file

Default_User on July 30, 2013 at 12:37 am

Hi, this might be a very simple fix but is it possible to add font tags in the code somewhere?

Default_User on July 30, 2013 at 12:05 am

thanks for share helpful nice tutorial

baterai double power on February 1, 2015 at 2:14 pm

why it is not working in IE10

please help me

pandolino on July 11, 2013 at 4:45 am

Great JOb,

Mahathaya on July 8, 2013 at 11:17 pm

Very, very good.

Aleksandar on July 4, 2013 at 3:08 am

Nice..very short and effective code and representation its effective..sure going to use in my site..Thanks

Iqbal Hussain on June 13, 2013 at 12:16 am

Great Article

Aleksandr on May 20, 2013 at 11:53 am

who use onmuseover = stop tick slide ?

rouzbeh on May 16, 2013 at 2:27 am

how to get the author name also included (example 4)

peter on April 18, 2013 at 5:32 am

Absolutely greate

Mohammad Rahmani on April 17, 2013 at 3:14 pm

Great plugin and explanations

Mohammad Rahmani on April 17, 2013 at 3:07 pm

great . very helpful . thanks

peyman on April 8, 2013 at 6:26 pm

thank you…
can you suggest me on how to pause on mouse over..

Ashish on March 26, 2013 at 1:37 pm

I like simple scripts. People do the same thing with 200 lines of code.
I made pause hover effect like this:

function tick(){
jQuery(‘#ticker li:first’).slideUp(
function () { jQuery(this).appendTo(jQuery(‘#ticker’)).slideDown(); });
}

var t = setInterval(tick, 2000);

function mOver(obj)
{
clearInterval(t)
}

function mOut(obj)
{
t = setInterval(tick, 2000);
}

Instead of tag add

OnionStand on March 18, 2013 at 6:26 am

great work! does anyone know kow to animate the ticker (not only slide up the new layer) like the promo ticker at the bottom on this site? thanks again for the highly respected work.

rico on March 9, 2013 at 5:01 pm

@Manolof, can you show me an example of a working pause solution? I tried your post with no luck šŸ™

kevin on March 6, 2013 at 1:11 am

A pause solution that actually works!

jQuery(document).ready(function($) {
function tick(){
$(‘#ticker li:first’).slideUp( function () { $(this).appendTo($(‘#ticker’)).slideDown(); });
}

$(‘#ticker’).mouseover(function() {
window.clearInterval(intervalID);
}).mouseout(function(){
intervalID = window.setInterval(function(){tick()}, 1000);
})

var intervalID = window.setInterval(function(){tick()}, 1000);
});

Manolof on February 20, 2013 at 4:18 pm

Exactly what I was looking for! You just saved me some work, thanks! šŸ™‚

Matt on February 19, 2013 at 4:45 pm

Great tutorial. Thank you very much

aldair on February 3, 2013 at 9:15 pm

it’s work, very thanks u.

pelangsing asli on January 24, 2013 at 1:30 pm

Sorry I got it in the end. Just a case of understanding and rereading the article.. which is quite clear!!! I was able to achieve my goal by setting the opacity of the LI in the CSS and then altering the opacity value before fading out and appending.

Jim on January 23, 2013 at 11:39 am

This is great but can you tell me how the ticker is able to animate through the list and then restart at the first item again. I must be missing something.

$(‘#ticker_03 li:first’).animate({‘opacity’:0}, 2000, function () { $(this).appendTo($(‘#ticker_03’)).css(‘opacity’, 1); });

Ideally I need to work out a way to animate the opactity back in slowly with another animation transition.

Jim on January 23, 2013 at 11:10 am

Thank you very much, i really love this script, its very simple easy and easy to modify it.

Thank you so much to this script.

Regards
Ghullam Murtaza Mallah

Ghullam Murtaza on January 23, 2013 at 3:04 am

hi,

could this ticker also be hooked up with a mysql database to display the latest entries?

Andreas on January 21, 2013 at 5:09 am

This is a great little piece of code. Thank you, thank you, thank you!

I had been messing around with three other jQuery tickers with tons of code, and they all basically worked, but not just quite right. Then I gave up and went searching for alternatives, and found this amazing gem. It never ceases to amaze me what jQuery is capable of!

Any, here’s a quick code snippet to enable pause on mouseover/mouseout, and in addition, it changes the cursor during the pause. Remove the original “setInterval…” statement in the source:

$(‘#ticker’).hover(function() {
$(this).css(‘cursor’,’progress’);
clearInterval(tickInterval);
},function() {
$(this).css(‘cursor’,’pointer’);
startTimer();
});

function startTimer(){
tickInterval = setInterval(function(){tick()}, 5000);
}

startTimer();

Also, I’m doing a top-down/multiple item ticker, with a fade-in:

$(‘#ticker-list li:last’).hide();
$(‘#ticker-list li:last’).prependTo($(‘#ticker-list’));
$(‘#ticker-list li:first’).slideDown(500).css(‘opacity’, .1);
$(‘#ticker-list li:first’).animate({‘opacity’:1}, 1000);

And also loading the ticker dynamically with AJAX:

$.get(‘feed.php’, function(data) {
$(“#ticker-list”).html(data);
});

Where “feed.php” returns the records. I can also dynamically reload the list and the ticker just keeps on going.

Hank on January 18, 2013 at 11:13 am

Leave a Reply

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