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.

  • 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 (51)
    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 […]
  • jQuery Snow Falling plugin (114)
    I like winter because of holidays and snow. Not big fan of going to shopping and buying New Year gifts and presents, but I am fan of snow and snowboarding. That's why I enjoy watching how […]
  • Coin Slider: Image Slider with Unique Effects (1638)
    After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn't find that somebody […]
  • jqIsoText: jQuery Text Effect Plugin (107)
    Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that.  One of them is jqIsoText. With this […]

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

Hello,

Can we make it work on shopify?

Thanks

Vero on December 5, 2016 at 1:07 am

Very Nice and Precise…..

Mohit Gaur on September 16, 2015 at 9:33 am

what you think about putting name + image + some links with discription in it..
?

rahul on April 9, 2015 at 10:08 am

thanks for sharing it
this is really helpful..and saved a lot of time for me.

prem on January 21, 2015 at 2:42 pm

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

arun on November 6, 2013 at 12:21 pm

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

cahaya on October 8, 2013 at 4:47 am

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

stephen on October 1, 2013 at 3:44 pm

Thanks for tutor guys

fazri on September 22, 2013 at 9:29 pm

easy and helpful !
tnx

Mohammad Amin on August 29, 2013 at 11:19 pm

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.

Rod on August 17, 2013 at 4:15 am

If anyone is interested, here is my working code to scroll backwards:

function tickback()
{
$(‘#ticker li:last’).animate({‘opacity’:0}, 200, function () { $(this).prependTo($(‘#ticker’)).css(‘opacity’, 1); });

}

For my site, I just used an image with a href and onclick to run each function. eg. onclick=’tick();’ to skip forward to the next item and onclick=’tickback();’ to go to previous item.

Rod on April 5, 2015 at 12:48 pm

nice Article

Jegadheesh on August 6, 2013 at 7:01 am

li style= LOL comment box is censoring code!

Default_User on July 30, 2013 at 9:26 pm

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

Default_User on July 30, 2013 at 9:24 pm

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?

Default_User on July 30, 2013 at 9:17 pm

Leave a Reply to Mathieu Cancel reply

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