« Previous entry | Next entry » Browse > Snippets

Skip to comments (11) RSS ticker in JavaScript
Posted by Niek on Oct 17 2005 @ 19:03  :: 5591 unique visits

Perhaps you recognise the situation: you've got a RSS feed for your site, but there are visitors out there who want to place a news ticker on their personal homepage.

Of course they can parse the RSS feed themselves (using PHP for example), and output some nice HTML, but the majority of your users simply wants to include a JavaScript ticker from your site.

You can write a dedicated JavaScript ticker which queries your database etc, but I think the solution below is easier: a simple JavaScript that loads your RSS feed (using XMLHttpRequest) and converts it to HTML.

File: rss.js, place somewhere on your webserver.
CODE: JAVASCRIPT
function rss_ticker(url) {
  // Create ticker div
  document.write('<div id="ticker">Loading RSS feed...</div>');

  // Create XMLHttpRequest object
  try {
   xh = new ActiveXObject('Msxml2.XMLHTTP');
  }
  catch(e) {
    try {
      xh = new ActiveXObject('Microsoft.XMLHTTP');
    }
    catch(oc) {
      xh = null;
    }
  }
  if(!xh && typeof XMLHttpRequest != 'undefined') xh = new XMLHttpRequest();

  // Get the RSS feed
  xh.open('GET', url, true);
  xh.onreadystatechange = function() {
    if (xh.readyState == 4) {
      parse_data(xh.responseText);
    }
  }
  xh.send(null);
}

// Parse the RSS feed and write to the ticker div
function parse_data(data) {
  var pos = 0;
  var ticker = document.getElementById('ticker');
  ticker.innerHTML = '';
  while((pos = data.indexOf('<item>', pos+1)) != -1) {
    title_b = data.indexOf('<title>', pos);
    title_e = data.indexOf('</title>', pos);
    title_s = data.substr(title_b+7, title_e-title_b-7);

    link_b = data.indexOf('<link>', pos);
    link_e = data.indexOf('</link>', pos);
    link_s = data.substr(link_b+6, link_e-link_b-6);

    ticker.innerHTML += '<a href="'+link_s+'">'+title_s+'</a><br />';
  }
}


File: rss.html, example layout (place on the same webserver as rss.js)
CODE: HTML
<html>
<head>
<title>JavaScript RSS ticker</title>
<style type="text/css"><!--
body {
  font-family: Arial;
}
#ticker {
  font-size: small;
  background-color: #eee;
}
--></style>
</head>
<body>

Example (CodePost RSS Feed):<br />

<script type="text/javascript" src="rss.js"></script>
<script type="text/javascript"><!--
rss_ticker('http://www.codepost.org/rss.xml');
--></script>

As you can see, the feed is loaded on the background and showed as soon as it's parsed.

</body></html>

You need to replace the URL in the rss_ticker() call with your RSS feed.

The big drawback is that it's impossible to do XMLHttpRequests to webservers on a different hostname. With other words: visitors can't include simply tour rss.js file on their site and call rss_ticker('url'). The only solution I know is that visitors embed your html file with a iframe.

Of course this is not a really nice solution, if anybody knows a different method to fix this issue, please let me know :)

11 comments posted so far
Add your own »

1. On Oct 18 2005 @ 03:14 Snyke wrote:

Uhm surely this can be done using the DOM-Standard. I really hate Microsoft specific stuff, especially ActiveX.

2. On Oct 18 2005 @ 09:27 Niek wrote:

I'd call XMLHttpRequest pretty standard today. GMail/Google Maps/MSN Maps: they're all using it. BTW, the ActiveX trick is only needed with Internet Explorer, it works 'out of the box' with Mozilla/Opera.

3. On Oct 18 2005 @ 10:10 tothbenedek wrote:

Very good and simple, but it has the common ajax problems:
- When you load it in IE in a "restricted" site it will ask if it can run the object which is quite "unfriendly"
- If you load it with an incompatible browser (typically very old IE) it will not work.

For "professional usage" my recommendation is that if you use this on a dynamic site, you should first check the browser and try to determine if it's compatible. If not, show the feed using a server-side application.

4. On Oct 19 2005 @ 22:46 Ian wrote:

Well, it won't work at all if you try to fetch an RSS feed from another server. Otherwise I think it should work.

But why all the weird indexOf stuff instead of using the DOM API? items = xmlFile.getElementsByName("item") etc.

5. On Nov 19 2005 @ 15:50 guest wrote:

hello,
how I can link in another frame?  

my idea:
ticker.innerHTML += '<a href="'+link_s+'" target="'mainFrame'">'+title_s+'</a><br />';

but it doesnt work..

6. On Dec 30 2005 @ 15:40 guest wrote:

ticker.innerHTML += '<a href="'+link_s+'" target="mainFrame">'+title_s+'</a><br />';

7. On Apr 02 2008 @ 10:43 guest wrote:

Dammit! won't work!

8. On Jun 06 2008 @ 16:18 Dolomite wrote:

It works fine. The Javascript file needs to be placed on a server.

9. On Jul 28 2008 @ 16:37 hhgh wrote:

hhhj

10. On Feb 10 2009 @ 01:58 zsdasd wrote:

solar power systems
generate electricity
home wind power
purchase movies
forex strategy
movie download sites
downloading movies
slot machines online]

11. On Apr 18 2009 @ 12:47 Smith wrote:

I am looking to learn web development and web programming languages like HTML, Java Script, PHP etc. I had been busy in my certification exams including 70-649 exam for TS: Upgrading Your MCSE on Windows Server 2003 to Windows Server 2008, Technology Specialist and PMI-001 Exam. Currently I am free so I am working on web programming. Your java script code is very handy for me as well as it is easily readable and runable. My next 642-812 Exam for Building Cisco Multilayer Switched Networks and 642-901 Exam will begin on next month or may be a bit later. After that all there will be only one Microsoft exam remaining that is for Managing and Maintaining a Windows Server 2003 Network Infrastructure (70-291). I will remain very busy but you don’t worry man. I will keep visiting your site whenever I will be free. Thanks.

Add a new comment

Name:
Password: (leave empty for anonymous comment)
 
View formatting tags Comment: