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



Comments [ 86 Comments ]

  1. Gleenk
    October 21, 2011

    Really “compact” code, thank you ;)

  2. Michael Kropat
    November 11, 2011

    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);

  3. Madhav Tripathi
    December 11, 2011

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

  4. ash
    January 5, 2012

    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

  5. Jenny
    February 8, 2012

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

  6. Jenny
    February 8, 2012

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

  7. Angel
    February 8, 2012

    Best code ever.

  8. Benj
    February 17, 2012

    exactly what i need !
    Thanks a lot

  9. kaviarasankk
    March 16, 2012

    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

  10. Fabrizio
    March 20, 2012

    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

  11. phil
    March 24, 2012

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

  12. phil
    March 24, 2012

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

  13. phil
    March 24, 2012

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

  14. Khaled
    March 25, 2012

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

  15. Rex
    March 26, 2012

    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

  16. Kaan Karahan
    March 27, 2012

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

  17. Abimbola
    April 10, 2012

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

  18. Abimbola
    April 10, 2012

    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); });
    }

  19. Steve
    April 13, 2012

    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();

  20. Frank
    April 17, 2012

    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

  21. Dror S.
    April 18, 2012

    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!

  22. Nick
    April 25, 2012

    Really useful post thanks,

    How would you go about including the links within tweets?

    Thanks in advance.

  23. Tidy Design
    May 17, 2012

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

  24. clarhaeHEARTjongin
    May 22, 2012

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

  25. yogs
    June 4, 2012

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

  26. Brad
    June 22, 2012

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

  27. Sheppe
    June 25, 2012

    Thanks for this elegant solution to a common problem. :)

  28. Creative Hero
    July 13, 2012

    Nice Post….Thanks :)

  29. Seangabe
    July 18, 2012

    @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;
    }

  30. Webdesign
    August 2, 2012

    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.

  31. Fazlee
    August 5, 2012

    How do i pause the ticker when mouseover? Thanks.

  32. farhadfery
    August 6, 2012

    thank you for this.

  33. JanB
    August 15, 2012

    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.

  34. Sagive
    August 26, 2012

    Wow man… thats cool. took it and made a wordpress widget out of it :)

  35. Oscar
    August 26, 2012

    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.

  36. Jefferson Abreu
    August 26, 2012

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

  37. MK
    August 31, 2012

    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);

  38. Piers Johnson
    September 24, 2012

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

  39. J James
    November 5, 2012

    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.

  40. J James
    November 5, 2012

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

  41. Mathieu
    November 9, 2012

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

  42. Vong
    November 19, 2012

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

  43. GMAC
    December 1, 2012

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

  44. Lisa @ Hochzeit & Trauung
    December 1, 2012

    Hi

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

    Best

  45. kentooz
    December 1, 2012

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

  46. Web Design
    December 6, 2012

    Works a charm. Thanks for posting!

  47. yaniv shmuel
    December 16, 2012

    Thanks, good news tick

  48. Hank
    January 18, 2013

    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.

  49. Andreas
    January 21, 2013

    hi,

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

  50. Ghullam Murtaza
    January 23, 2013

    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

  51. Jim
    January 23, 2013

    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.

  52. Jim
    January 23, 2013

    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.

  53. pelangsing asli
    January 24, 2013

    it’s work, very thanks u.

  54. aldair
    February 3, 2013

    Great tutorial. Thank you very much

  55. Matt
    February 19, 2013

    Exactly what I was looking for! You just saved me some work, thanks! :)

  56. Manolof
    February 20, 2013

    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);
    });

  57. kevin
    March 6, 2013

    @Manolof, can you show me an example of a working pause solution? I tried your post with no luck :(

  58. rico
    March 9, 2013

    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.

  59. OnionStand
    March 18, 2013

    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

  60. Ashish
    March 26, 2013

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

  61. peyman
    April 8, 2013

    great . very helpful . thanks

  62. Mohammad Rahmani
    April 17, 2013

    Great plugin and explanations

  63. Mohammad Rahmani
    April 17, 2013

    Absolutely greate

  64. peter
    April 18, 2013

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

  65. rouzbeh
    May 16, 2013

    who use onmuseover = stop tick slide ?

  66. Aleksandr
    May 20, 2013

    Great Article

  67. Iqbal Hussain
    June 13, 2013

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

  68. Aleksandar
    July 4, 2013

    Very, very good.

  69. Mahathaya
    July 8, 2013

    Great JOb,

  70. pandolino
    July 11, 2013

    why it is not working in IE10

    please help me

  71. Default_User
    July 30, 2013

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

  72. Default_User
    July 30, 2013

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

  73. Default_User
    July 30, 2013

    Pretty sure that Joomla is not using global.css; in that case can I just use a font tag directly in the code without linking to global.css?

  74. Default_User
    July 30, 2013

    Nevermind, figured it out. I just added the font-family tag inside ; above the individual news ticks.

  75. Default_User
    July 30, 2013

    li style= LOL comment box is censoring code!

  76. Jegadheesh
    August 6, 2013

    nice Article

  77. Rod
    August 17, 2013

    Would it be easy to add a ‘next’ and ‘previous’ button/link to cycle through the list manually?

    This would be handy if you see an item in the list, but didn’t read it in time before the next item is shown.

  78. Mohammad Amin
    August 29, 2013

    easy and helpful !
    tnx

  79. fazri
    September 22, 2013

    Thanks for tutor guys

  80. stephen
    October 1, 2013

    how do you make only the top one visible? I cant figure it out.

  81. cahaya
    October 8, 2013

    just try to code, why not full style like your demo ? all fuction my copy, it’s something less

  82. arun
    November 6, 2013

    Can i get Jquery for
    Example 02 [3 news always visible]



» Trackbacks and pingbacks click to expand

  1. Twitter…

    Loads of people are tweeting about this topic right now…

  2. [...] Do you want to learn how to create one on your own in only 4 lines od jQuery code ? Check out the original article for more Demo’s and Downloads 4.Featurify Marquee jQuery plugin! Extremely easy to use [...]

  3. [...] 5. News Ticker in 4 lines of jQuery [...]


Leave a Reply

More Articles


more on WORKSHOP.rs