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.

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

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

#news{
    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! :)