Tuesday, July 28, 2009

How to implement a news ticker with jQuery and ten lines of code


After my previous posts about how to implement a news ticker with MooTools I received a lot of emails from my readers that asked to me to implement a similar feature with jQuery, including fade in and fade out effects, in the simpler possible way. So in this post I want to illustrate you how to implement a nice news ticker using jQuery and just ten lines of Javascript code. The result is something like this:




I suggest you to take a look at this live preview and download the source code to understand how it works. In the source code I added a file called base.html that contains the basic structure of this ticker you can quickly reuse and customize in your web project.





A little introduction
Step 1: image to have a <ul> list with ID = listticker. This list contains some list elements <li> (in this case: My News 1, My News 2, ...). First step is: get the first element of the list, save its content into a var and remove it using a fade out effect.



You can get the HTML code contained into the first element of the list (#listticker) and assign it to a var (first) using this simple code:

first = $('ul#listticker li:first').html();


To use fade out effect and remove the element you can use this code:

.fadeOut('slow', function() {$(this).remove();});


Step 2: now you have to add the content saved into the var first to the end of the list:


You can use this simple code:

$('ul#listticker').append(first)


...where first is the var you used to save the content of the first element in the step 1.

Step 3: Now you have to move up the content of the list (My News 2 is now the first element of the list) and repeat the entire process from the step 1.




In Javascript code section of this tutorial I used setInterval() to repeat the process every 3 seconds (3.000 milliseconds). Ok, now take a look at HTML and Javascript code.


HTML Code
HTML code is really simple. The only thing you have to do is adding an <ul> list with ID = listticker and some list elements:

<ul id="listticker">
<li>My News 1</li>
<li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
</ul>

Remeber to add into the tag <head> of the page where you want to implement this ticker a link to jQuery:

<script type="text/javascript" src="jquery.js"></script>


Javascript Code
Take a look at the follow code. I implement 2 functions removeFirst() and addLast(). Each function contains five lines of code. Total lines for "conceptual" code: 10 lines! I promised! :)

<script type="text/javascript">
$(document).ready(function(){

var first = 0;
var speed = 700;
var pause = 3000;

function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '
  • '+
  • first+'';
    $('ul#listticker').append(last)
    $('ul#listticker li:last')
    .animate({opacity: 1}, speed)
    .fadeIn('slow')
    }

    interval = setInterval(removeFirst, pause);
    });</script>


    In the last line I used:

    interval = setInterval(removeFirst, pause);


    ...it calls the function removeFirst()every 3 seconds (3000 milliseconds) and in this way I create ad infinite loop.




    If you have suggestions to improve the code please leave a comment. Thanks!


    Related Posts
    If you are interested on other about this topic take a look at the following posts:

    - News ticker with horizontal scrolling
    - Fantastic News Ticker Newsvine-like
    - Automatic news ticker with vertical scrolling and Start/Resume options
    - Joomla! extension: super news ticker

    Bookmark and Share
    Digg this

    No comments: