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.

UncleCode.Com-scrolling-news-ticker

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.

Bookmark and Share
Both comments and pings are currently closed.

3 Responses to “Jquery Scrolling News Ticker, Jquery Headlines Ticker Customizable”

  1. Isidro Vacio says:

    I was more than happy to find this site. I needed to thank you for this nice post UncleCode.Com – Technology Blog | Jquery Scrolling News Headline Ticker, Fully customisable through CSS, Jquery New Scrolling Script ! I undoubtedly loved every little bit of it and I have you bookmarked to take a look at new stuff you write.

  2. Man… Great… I will bookmark this blog and take the feeds also! Thanks. 😀

  3. Sam Hoxworth says:

    Well done for posting such a fantastic article. It’s well thought of and very well written.

n