There are many news headline scrollers, tickers available, but, this is a pure javascript lightweight news ticker/scroller for a website.
Easy to use and 100% customizable using CSS. Following are the features you can look for in this ticker-
- Pure CSS based
- Set height, width of the scroller/ticker as per your design
- Set delay in showing up the news, headline
- Display any number of news, headline
- News are stored in the form of Javascript array
- Place hyperlinks within the scrolling, ticker news
Click here to view this in action
How to Use Script
It is really very easy to integrate the script.
- Include the JS file which is in link “Click here to view this in action”. The JS file is placed in “js” folder.
- Include the CSS file which is in link “Click here to view this in action”. The CSS file is placed in “css” folder.
Now in the <head> of the web page place the following tags and javascript array-
<head> <title>UncleCode.Com – Technology Blog | Lightweight News Scroller pure javascript CSS based easy to customise</title> <meta name="description" content="Customisable pure javascript CSS based news scroller" /> <meta name="keywords" content="news scroller, javascript CSS based scroller customisable" /> <link href="css/scroller.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/scrolling-news.js"></script> <script type="text/javascript"> var pausecontent=new Array() pausecontent[0]='<strong>PCI Awarded</strong><br /><br />PCI has won the International Export BID Award in Gold Category- 2007 held in Geneva.'; pausecontent[1]='<a href="electroplating-product.php?sid=282"><strong>Speciality Chemicals</strong><br /><br />PCI expands the production capacity for the manufacture of Speciality Chemicals & Intermediates for export markets...>></a>'; pausecontent[2]='<a href="electroplating-chemical.php?id=231"><strong>Trivalent Passivations</strong><br /><br />PCI Launches cost effective Tricolite series of Trivalent Passivations specially for Automobile Industry...>></a><br /><br />Go to <a href="http://www.trivalentpassivation.com" target="_blank"><strong>TrivalentPassivation.Com</strong></a>'; pausecontent[3]='<a href="electroplating-product.php?sid=280"><strong>Corrosion Inhibitors</strong><br /><br />KOROGUARD series of Corrosion Inhibitors for all types of Acid Pickling is introduced...>></a>'; pausecontent[4]='<a href="electroplating-product.php?id=185&sid=186#zincosheen-rm"><strong>Single Acid Zinc Brightener</strong><br /><br />PCI Zincosheen RM 345 Single Acid Zinc Brightener is now available for the first time in India...>></a>'; </script> </head>
In the web page below <body> tag or where ever you want to place your ticker paste in the following script tag:
<body> <div> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "smallGrey", 1000) </script> </div> </body>
Very fascinating post – could be outdated, but it surely was new to me. I wished say thanks for this great article UncleCode.Com – Technology Blog | Lightweight Javascript News Scroller, Ticker Pure CSS Based Customisable ! I positively loved reading every little bit of it. I have you bookmarked to check out new articles you publish.
I was very pleased to find this site. I needed to thank you for this nice article UncleCode.Com – Technology Blog | Lightweight Javascript News Scroller, Ticker Pure CSS Based Customisable ! I positively loved every bit of it and I have you bookmarked to take a look at new articles you write.
I was more than happy to find this website. I needed to thank you for this nice post UncleCode.Com – Technology Blog | Lightweight Javascript News Scroller, Ticker Pure CSS Based Customisable ! I undoubtedly enjoyed each bit of it and I have you bookmarked to take a look at new articles you publish.
There is obviously a lot to know about this. I think you made some good points Features also.
Every time I visit this site there’s something new and improved to learn from. haha I’ve been in your source code multiple times to learn how you’re doing some things so I can put them on my site. Thanks! I can teach you about making money online. Just subscribe to my RSS Feed and follow my blog!
Dude this website provide free to download and use code snippets.
Please feel free to snatch the code and place on your website. After all our aim is to serve the community.
very cool & good code, thank you very much for sharing.
Can you gimme a favor by sharing this code on my JavaScript library?
Awaiting your response. Thank