This script is based on one I found at news.bbc.co.uk. A client pointed it out to me and wanted it on his website.
Improvements made to original:
- Simpler to implement
- Links in the ticker will be found by search engines.
- Degrades gracefully
- Does not rely on prototype or any other monolithic JS library.
- Supports as many tickers on a page as you desire
- Code is encapsulated into a single class so it wont interfere with any other javascript libraries you may be using.
How to use it:
- Download AccessibleTicker.class.js
- Link to it using standard <script src=”AccessibleTicker.js” mce_src=”AccessibleTicker.js”></script> tag in the head of your html document.
- Define an empy placeholder anchor tag where the ticker will be located giving it a unique ID attribute: <a id=”your_id”/>
- Define an unordered list of links <ul> (see below) giving the ul tag a unique ID attribute.
- Initialize the ticker using the <ul> ID and the <a> id from steps 2 and 3. In the example I have simply placed the initialization code below the elements themselves. You can run it on the ‘onload’ event if desired.
Very basic Example code:
<a id=’test1_container’ style=’display: none;’></a>
<ul id=’test1_data’>
<li><a href=’http://google.com’>Google</a></li>
<li><a href=’http://gmail.com’>GMail.. web based email</a></li>
</ul>
<script>
var ticker1 = new AccessibleTicker(’test1_container’, ‘test1_data’);
</script>
See the example page and view the source for more detail.