Jquery Scrolling News Ticker, Jquery Headlines Ticker Customizable

Jquery has become very popular script and first choice of many developers world wide. It is easy use, implement and shows a powerful play with few lines of code.

Corporate websites always has a demand of displaying latest company news in website mostly on home page or header.

This scrolling script can be easily modified to suit your needs. It contains a customizable CSS to modify width, height, font, background, color as per your needs.

View Demo

Click here to view this in action

The text which is required to be placed in scrolling is required to be embed in a <div> like below with id=”tickerContainer”.

Every news headline and text is to be placed in separate <dt> tag like below-

<div id="tickerContainer">
<div id="ticker">
<dt>Middle East peace talks</dt><dd>Israel and the Palestinians agree to resume direct negotiations for the first time in 20 months, US Secretary of State Hillary Clinton says..</dd>
<dt>UN calls for Pakistan helicopters</dt><dd>More helicopters are urgently needed to deliver aid to the millions of Pakistanis still cut off by devastating floods, says the UN.</dd>
<dt>Chernobyl decline linked to DNA</dt><dd>Scientists working in Chernobyl find a way to predict which species are likely to be most severely..</dd>
<dt>United by loss</dt><dd>US Lockerbie families feel betrayed over Megrahi release..</dd>
</div>
</div>

If you want you can also make the above dynamic using PHP. For example if you are receiving the news content from a database table you can write a simple php news scrolling script as below-

<div id="tickerContainer">
<div id="ticker">

<?php

//Assuming you have the values in an array as Key=>value pair

foreach($news as $key=>$val)

{
//$key is a headline and $val is description

echo "<dt class=\"headline\">" . $key . "</dt> <dd class=\"text\">" . $val . </dd>

}

?>

</div>
</div>

So easy to customize as per your needs.