25th July 2008

The world's only free and accessible RSS news ticker (PHP and JavaScript)

I'm of the opinion that RSS/news tickers are a uniformly bad idea; they're typically not accessible, not attractive and awfully 90's. However, there are some instances where they're acceptable (and clients tend to like them), but where do you get them from?

I had a look around online for nice free examples that met most of my criteria but no... People were either asking me to pay for them or they were just awful, like DHTML awful - straight out of the 90's. So I set about a really simple exercise of providing the world with a really simple, accessible RSS ticker.

What you need

I'm not even bothering with SimplePie for this, just PHP5's marvelous SimpleXML so you just need a PHP5 enabled server (and an RSS feed to use, in this example I'm using my feed from Seopher.com).

What I'm going to do

I'm going to create a wrapper div with an overflow of hidden and a fixed width, within it I'm going to have an unordered list that contains the titles for each of the items in the RSS feed. I'll display these next to one another and using Javascript I'll animate them to move from one side to another. Make sense? If it doesn't all will become clear shortly.

PHP

All I need to do here is connect to my RSS file, iterate through the titles and create an unordered list with the linked recent articles. As such:

<?php $feedUrl = 'http://feeds.feedburner.com/SeopherRssFeed'; /*it's pretty likely that your host won't allow you to use file_get_contents, so I've commented it out. instead we can use Curl to get the same stuff, and it's a lot safer*/ //$rawFeed = file_get_contents($feedUrl); $ch = curl_init(); $timeout = 5; // set to zero for no timeout curl_setopt ($ch, CURLOPT_URL, $feedUrl); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $rawFeed = curl_exec($ch); curl_close($ch); //load the simpleXML object $xml = new SimpleXmlElement($rawFeed); $html = '<ul>'; //iterate through it and build the list foreach ($xml->channel->item as $item) { $html.= '<li><a href="'.$item->link.'" title="'.$item->title.'">'.$item->title.'</a></li>'; } $html.= '</ul>'; ?>

That's pretty self explanatory I think; grab the feed, iterate through each of the items in the channel and write out a list-item (properly marked up with a title tag too). Easy!

XHTML

The XHTML for this is fairly minimal; just a wrapper called 'ticker', a div within that called 'ticker-inner' (which I'll use to set the massive width required for this task). Inside that I'm simply echo'ing out the $html variable I created in PHP at the top of the document. Still very straight forward at this point...

<div id="ticker" class="noscript"> <div id="ticker-inner"> <?php echo $html; ?> <br class="clear-both" /> </div> </div> <a href="#" id="toggleTicker">Stop Ticker</a>

The purpose of the 'noscript' class will become apparent in the CSS section, while 'toggleTicker' will become apparent in the JavaScript bit.

CSS

This is slightly more complicated... What I'm doing is setting a fixed width on the ticker container with an overflow of hidden - this is the box you see that contains the ticker itself. Ticker-inner has a massive width set (far too large) to accomodate quite a few RSS items. I'm also offsetting ticker-inner off to the left of the ticker-container too, allowing items to scroll past the viewable window. There's quite a lot of CSS here so see the comments in the code below for more info:

a { outline:none; } .clear-both { clear:both; } a#toggleTicker { color:#FD6801; margin-top:8px; display:block; outline:none; } /*this is the main wrapper for the ticker*/ #ticker { width:400px; height:1.3em; border:1px solid #000000; padding: 3px 0px; overflow:hidden; position:relative; background-image:url(rss-bg.gif); background-repeat:repeat-x; background-color:#FD6701; } /*styles specifically for when JS is disabled, I'll explain how this works in the JS section*/ #ticker.noscript { overflow:visible; height:auto; } /*really wide div within the wrapper*/ #ticker-inner { width:10000px; position:relative; margin-left:-3000px; } /*more noscript styles*/ #ticker.noscript #ticker-inner { margin-left:0px; width:auto; } /*positioned absolutely 3400px away from the left hand side of the #ticker-inner div. Why 3400? Because 3000 of that is off the screen to the left and the width of the wrapper is 400px, so this positions it just out of view on the right hand side*/ #ticker ul { padding:0px; margin:0px; height:1.3em; position:absolute; left:3400px; } /*yet more noscript*/ #ticker.noscript ul { position:relative; height:auto; left:0px; } /*simply display these next to one another in the #ticker-inner div*/ #ticker ul li { padding:0px; margin:0px; margin-right:30px; display:block; float:left; height:50px; } /*more noscript*/ #ticker.noscript ul li { position:relative; float:none; clear:both; height:auto; } #ticker ul li a { color:#ffffff; text-decoration:none; } #ticker ul li a:hover { color:#ffffff; text-decoration:underline; }

Okay so we've got the UL positioned absolutely just out of view to the right. Note the use of the 'noscript' class; this allows me to set styles specifically for when JavaScript is disabled. How? Well it's simple. Apply a class of 'noscript' to the container and remove it with JavaScript onDomReady - meaning if JS is enabled then users see it how you intended, otherwise the 'noscript' class remains on the page and it renders nicely. Simple!

JavaScript

Okay so the first thing I'm doing is removing the 'noscript' class (for reasons described above). Again because there's quite a lot of code I've annotated it in the box below:

window.addEvent('domready', function() { /*remove the noscript class, so everything displays properly*/ $('ticker').removeClass('noscript'); /*get the list of items generated by php*/ var ul = $('ticker').getElement('ul'); /*create the effect. note that when it completes it calls the complete() function. note that the duration is set to the result of getDuration(), see below for what that does*/ var slideUL = new Fx.Tween(ul, { duration: getDuration(), transition: Fx.Transitions.linear, onComplete: function() { complete(); } }); var stopUL = new Fx.Tween(ul); /*this is the initial call to start the ticker moving when the page has finished loading*/ slideTicker(); /*all this is doing is ensuring the list is 3400px from the left and therefore just out of view. it checks the width of the list and calculates where it should slide to. it then starts the animation*/ function slideTicker() { ul.setStyle('left', 3400); var ulwidth = ul.getStyle('width'); var slideTo = 3000 - parseInt(ulwidth); slideUL.start('left', slideTo); } /*pause the effect*/ function pauseTicker() { slideUL.pause(); } /*resume the effect*/ function resumeTicker() { slideUL.resume(); } /*cancel the animation*/ function stopTicker() { slideUL.cancel(); } /*this recursively calls the slideTicker() function, so when slideTicker has finished it calls complete(), which simply calls itself again. meaning the ticker goes on forever*/ function complete() { slideTicker(); } /*works out how many items there are in the feed, so that however many items there are, the speed is consistent. each item in the feed counts for 10 seconds of time. */ function getDuration() { var liCount = $('ticker').getElements('li'); liCount = liCount.length; var duration = liCount * 10000; return duration; } /*event listeners for mouse-over and mouse-leave of the ticker; if you hover your mouse over it, it stops the animation and allows you to click on the item*/ $('ticker').getElement('div').addEvent('mouseenter',function(e) { e = new Event(e).stop(); pauseTicker(); }); /*if you then stop hovering on the ticker it resumes the animation*/ $('ticker').getElement('div').addEvent('mouseleave',function(e) { e = new Event(e).stop(); resumeTicker(); }); /*this is the control introduced purely for accessibility reasons, if you click on it, it pauses the ticker. click on it again and it resumes*/ $('toggleTicker').addEvent('click',function(e) { e = new Event(e).stop(); if(this.innerHTML == 'Stop Ticker') { pauseTicker(); this.innerHTML = 'Resume Ticker'; } else { resumeTicker(); this.innerHTML = 'Stop Ticker'; } }); });

The eventlistener on 'toggleTicker' is important for accessibility reasons; if you have moving content on the screen you should offer a control to stop the movement. Some visual disabilities mean users can become overly distracted by moving content - making it very hard for them to see anything else but what's moving. Therefore if you have a link on the page that can stop the animation like this does, you're covered.

It even works out how many items are in the list and alters the duration accordingly; meaning you get a nice consistent speed. Only mega (and I mean MEGA) long titles will flick past at an annoyingly quick rate. You could probably work out the duration based on the width of the UL come to think of it and give it a certain number of seconds per 100px. Either way, this isn't too bad as it is.

Accessibility and Degrading

This is the only accessible version I've seen. If you turn off JavaScript you're just presented with a normal unordered list (because I'm using JavaScript to remove the 'noscript' class) so those without this technology enabled can still access all the content. The markup is clean and the user can interupt the animation easily enough. Therefore this is as accessible as you can get a news/RSS ticker.

Conclusion

There you go. It's really simple; the animation isn't difficult and the output isn't anything amazing. It is however one of the only free, accessible RSS tickers available on the Internet. If you've seen a better one let me know and I'll improve mine. Like I said before, this is uber simple yet effective. It's free to use so go nuts.

Tagged with widget, javascript, php, accessibility, css, xhtml