About Me

My photo

one who looks outside, dreams
one who looks inside, awakens!!

Get FREE updates!! subscribe!!

Delivered by FeedBurner

Like it? Follow up!! :)

Oct 12, 2013

Custom news ticker script using jQuery

Hi everyone!

Here is a piece of cake , a custom news ticker script using jquery.

First create a division and write all the tickers inside the "<li>" tags.

           <ul id="news">
            <li>First news ticker text</li>
                <li>Second news ticker text </li>

Next add some css to hide the <li> texts and style up your news box column as you like.

    height: 50px;
    overflow: hidden !important;
    border-bottom:#F00 1px dashed; margin:opx auto;

#news li {
   height: 50px;

Now a very simple jQuery script to bring your news ticker to life

//function to find the texts other then the first text
function newstick(){
$('#news li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#news')).css('opacity', 1); });

// This will automatically call the next tickers for a time interval of 4 sec
setInterval(function(){ newstick() }, 4000);

Thats it! told you was a piece of cake!

Tested with latest browsers only. Let me know your thoughts through comments!

subscribe for more cool codes and see the other links below!. 

Have a great day! :)