Accessible JavaScript Newsticker
Recently we had a forum post by Heiko in which he asked whether anyone knew a JavaScript or Java based newsticker. Actually I didn’t know any, so I decided to code one on my own.
Personally I don’t like conventional newstickers because of several reasons. First of all they are quite questionable from a usability point of view — the scrolling text distracts the user from the actual content. Secondly most of the implementations are not accessible, since they either use Java applets or JavaScript that does not degrade gracefully. And last but not least most implementations take up an impressive amount of CPU performance.
So I made up my mind and came up with a solution that more or less eliminates those downsides. The markup is actually nothing remarkable — just a simple unordered list and a wrapper div with a unique id.
<div id="newsticker">
<ul>
<li>Newsticker text 01</li>
<li>Newsticker text 02</li>
<li>Newsticker text 03</li>
</ul>
</div>
Since many web developers already use the Prototype JavaScript Framework, and I also wanted to use Scriptaculous for some nice animations I also used Prototype for my ticker. So if you are interested you can either take a look at my sample ticker or download the source code. Btw of course you may use the script on your site. So have fun :)
Note: Even though I’m quite familiar with JavaScript there is of course room for improvement. So if you have any suggestions feel free to post them. Thanks.
