jQuery: RSS feed rotator

Let's say that we want to create an RSS feed rotator with jQuery. To accomplish this, we need a server-side script to fetch the feed, jQuery's AJAX methods and a JavaScript timer to create the intervals between feeds. Since fetching a feed requires some time, we hide the elements while the process is running and then we reveal them one by one with a certain delay. First, let's take a look at our PHP script:

header('Content-Type: text/html');
$html = '<ul id="feed">' . "\n";

$feed = simplexml_load_file('http://feeds.feedburner.com/blogspot/onwebdev/');
    
    foreach($feed->channel->item as $item) {
    
        $title = $item->title;
        $raw_author = $item->author;
        $author = str_replace('gabriele.romanato@gmail.com', '', $raw_author);
        $author = str_replace('(', '', $author);
        $author = str_replace(')', '', $author);
        $links = $item->children('http://rssnamespace.org/feedburner/ext/1.0');
        $link = $links->origLink;
        $raw_date = $item->pubDate;
        $pubdate = str_replace('+0000', '', $raw_date);
        
        $html .= '<li><a href="' . $link . '">' . 
        $title . '</a>' . "\n" . '<div class="author">' . $author . '</div>' . "\n" .
        '<div class="pubdate">' . $pubdate . '</div>' . "</li>\n";
    
    
    }
    
$html .= '</ul>' . "\n";


echo $html;

This script returns the following HTML snippet:

<ul id="feed">

 <li><a href="...">...</a>
 
   <div class="author">...</div>
   <div class="pubdate">...</div>
 
 </li>
 
 <!--more items-->

</ul>

There are 30 items in this feed and this will cause a certain delay in our process. Since CSS loads before JavaScript, we can use it to hide the elements while loading:

#feed-rotator {
 width: 200px;
 background: url(rss.png) no-repeat 50% 0;
 margin: 0 auto;
 border-bottom: 5px solid #999;
 padding-top: 160px;
 padding-bottom: 10px;
}

#feed-rotator #feed {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 200px;
}

#feed-rotator #feed li {
 width: 200px;
 display: none;
}

#feed-rotator #feed div.author {
 margin: 8px 0;
 padding: 5px;
 background: #ffc;
 text-align: center;
}

#feed-rotator #feed a {
 display: block;
 height: 100%;
 text-align: center;
 font-size: 1.1em;
 color: #c60;
}

#feed-rotator #feed div.pubdate {
 padding: 0.3em 0;
 border: 1px solid #999;
 border-width: 1px 0 1px 0;
 text-align: center;
 font-style: italic;
 color: #666;
}

div.status {
 padding: 5px;
 text-align: center;
 background: #c60;
}

Now the items are hidden so that we can use jQuery. First, we need to fetch the feed via AJAX when the DOM is ready:

$.ajax({
    type: 'GET',
    dataType: 'html',
    url: 'script.php',
    success: function(html) {
    
      $('#feed-rotator').html(html);
      
    
    }
    
});

Now we have all the 30 items on the page, but they're hidden by CSS. Then we need to declare two variables that will be used in our timer:

var items = $('#feed li').length;
var counter = -1;

Our timer has a five-seconds delay, so we need to insert a message for our users while they're waiting:

$('<div class="status" />').text('Loading feed...')
.appendTo('#feed-rotator');

Next, we need to display only the first item:

$('#feed li:first').show();

Finally, our JavaScript timer:

var interval = window.setInterval(function() {
  
  
  
    counter += 1;
   
    if(counter == items) {
    
      counter = 0;
    
    
    }
    
    if(counter == 0) {
    
      $('#feed-rotator div.status').hide();
    
    } 
       
    var element = $('#feed li').eq(counter); 
    
    element.slideDown().parent().find('li').not(element).hide();
    
   
  
}, 5000);

The first time this timer runs, it hides the loading message. Then it shows one item at time and hides all the other items except the current one. You can see the demo below.

Demo

Live demo