HTML, CSS & jQuery | How to create a simple ticker

In this tutorial i will show u how to create a simple ticker using HTML, CSS & jQuery by writing some simple line of code. Our final output will like below.

[wp-js-fiddle url=”http://jsfiddle.net/moinsam/jQhHQ/” style=”width:95%;height:300px;border:solid #4173A0 1px;”]

So lets get started.

Step: 1 

Our first step is to write basic code structure and adding necessary files.

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Ticker</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js "></script>
    </head>
 <body>
 </body>
</html>

Step: 2 

Now we add sample list code inside the body tag.

<div class="ticker">
   <h3>Latest News</h3>
   <ul id="ticker">
       <li>Dummy data is benign information that does not contain any useful data, but serves to reserve spac...</li>
       <li>For testing, dummy data can also be used as stubs or pad to avoid software testing iss...</li>
<ul>
	<li>In operational use, dummy data may be transmitted for OPSEC purposes.</li>
</ul>
<ul>
	<li>Dummy data must be rigorously evaluated and documented to ensure that it does no...</li>
</ul>
<ul>
       <li>The topic of this article may not meet Wikipedia's general notability guideline.</li>
</ul>
</div>

Step: 3 

After that we and our magical jQuery code inside the head tag which convert the list into a ticker.

<script type="text/javascript">
function ticker() {
    $('#ticker li:first').slideUp(function() {
        $(this).appendTo($('#ticker')).slideDown();
    });
}
setInterval(ticker, 3000);
</script>

Look the above script carefully, here we write a function named ticker(). Inside this function we have slide up the first list element and add it after the last element. Then we call the javascript setInterval() function which execute our ticker() function continuously at the time interval of 3 sec.

Step: 4 

Finally we add some CSS inside the head tag to style our ticker which make it more attractive. You can modify the ticker very easily by modifying the css code.

<style>
.ticker {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #DDD;
border-radius: 5px;
box-shadow: 0px 0px 5px #DDD;
background-color:  #F5F3E5;
text-align: left;
}
.ticker h3 {
padding: 0 0 10px 10px;
border-bottom: 1px solid #A7A7A7;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-style: italic;
}
ul li {
list-style: none;
height:50px;
padding:7px;
border-bottom: 1px solid #D6CFB8;
}
</style>

We hope that all the code are understandable to you. If there are any question about the code above please ask in the comment section.

Thank you for reading this post. Peace be with you.

Post Tagged with , , ,

29 Responses so far.

  1. Hi Moin

    I am quite new to java scripting.Can you help in making this work for horizontal ticker.

    Regards

  2. anuradha says:

    Hi Moin,

    where do you actually set the number of items to be displayed in the ticker. What if I want to display 5 items instead of 2.

    Thanks

  3. anuradha says:

    Hi Moin,

    I figured that it is part of the css. I have one more query. How do i handle pause on mouseover. The ticker should pause when I mouseover. How can I handle that?

    Thanks

    • Md. Moin Uddin says:

      Sorry for my late reply. It is very simple way to do this just update the jQuery code like following.

      function ticker() {
          $('#ticker li:first').slideUp(function() {
              $(this).appendTo($('#ticker')).slideDown();
          });
      }
      
      var timer = setInterval(ticker, 3000);
      
      $('#ticker').on({
        mouseenter: function(){
          clearInterval(timer);
        },
        mouseleave: function(){
          timer = setInterval(ticker, 3000);
        }
      });
      

      Thank You for your comment.

      • Zino says:

        hello, pls i updated my javascript code with the updated code up there and yet it still didnt work…Also, i tried the you put up here (http://jsfiddle.net/moinsam/jQhHQ/14/) but pointing your mouse pointer on it does not still stop the slide…pls whats the way forward?

        • anshul says:

          sir i’m also getting the same problem and its working on fiddle but not working when i’m putting it to the page.
          i tried creating a single html page only for this thing,but it is also facing the same problem.
          please help me in this problem also

    • Md. Moin Uddin says:

      or you can view the updated code on FIDDLE

  4. Chandan says:

    Hi,
    I need to load the list from database and display as ticker form. I am getting list in $.ajax i am not able to append tag to it and display it

  5. shraddha says:

    I want to know…how do we align the ticker to the right corner of the page..

  6. Jewel says:

    Nice post. hope i create it.

  7. Hi.. I want to keep previous and next button and may be pause on mouse over. How do I do it.??

  8. Hello, great script. I was able to get it to work perfectly in a test page, but when I tried to put it in my actual website, they “Style” code effected other parts of the site. I have a list another section and it spaced it out as if it was the list in the ticker. Is there a way to contain the style just for the ticker? thank you

  9. Xavier says:

    Sir, thank you very much for the tutorial. It saved me lot of work..

  10. Ronak says:

    Thanks Sir…!Its great!

  11. It’s just awsm. I was searching this for long period.Thank You very much for this. Thanks once again. :)

  12. Karthik says:

    Thanks moin..this is one of the most useful i have come across..please could you demo one more for fetching data from database

  13. Lyle Riyadh says:

    thanks author … you helped me with this … God bless you

  14. Johnc593 says:

    Woah! I’m really loving the templatetheme of this website. It’s simple, yet effective. A lot of times it’s hard to get that perfect balance between usability and visual appeal. I must say you have done a great job with this. In addition, the blog loads super quick for me on Firefox. Excellent Blog! adeceacdbabg

  15. anshul says:

    sir after some minutes the ticker becomes a little different from the starting one and bullets also come int it
    can you please help me in this.

  16. faheem says:

    Please give step by step SCREEN SHOTS for Liferay without internet protocol. How to use jquery 1.9.1 file without internet and where to place it in LIFERAY

  17. jeyaranisureshkumar says:

    Thank you very much for this coding.

  18. Ted says:

    Hi,
    I got a lot out of this tutorial, just one thing. How would I reverse the ticker’s direction?

    Thanks,
    Ted Rand

  19. vicky says:

    i need the tricker in vertical form.pls help me soon

  20. Ian says:

    Hi, Thanks for this code, great job, But I want this ticker to have a navigation for next and previous that will slide up the ticker once next was clicked and slide down once the previous was clicked. Thanks

Leave a Reply

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

16 − 2 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.