Tim Huffam

Dotting the I and crossing the T of I.T.

  Home  |   Contact  |   Syndication    |   Login
  153 Posts | 0 Stories | 2747 Comments | 653 Trackbacks

News

Archives

Post Categories

Interesting Blogs/Links

Here's an HTML page containing javascript functions for displaying an RSS feed in nicely formatted HTML. 

Licence Agreement: 
To use this work, you, the licencee, agree to purchase, me (Tim Huffam) a pint of beer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML RSS Viewer </TITLE>
<script>
  var rssDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
  rssDoc.onreadystatechange = popData;

  function displayRSS(path){
 mainTitle.href = "";
 mainTitle.innerHTML = "";
 items.innerHTML = "";

 rssDoc.load(path);
  }

  function popData(){
    if(rssDoc.readyState!=4)
  return;

 // Title
 mainTitle.href = rssDoc.selectSingleNode("/rss/channel/link").text;
 mainTitle.innerHTML = rssDoc.selectSingleNode("/rss/channel/title").text;

 // Items
    var rssItems = rssDoc.selectNodes("/rss/channel/item");
 for(var i=0;i<rssItems.length;i++)
 {
  var item='<li><a href="' + rssItems[i].selectSingleNode("./link").text + '" class="itemTitle">';
  item+=rssItems[i].selectSingleNode("./title").text
     item+='</a><br/><div class=item>';
  item+=rssItems[i].selectSingleNode("./description").text;
  item+='</div></li>';
  items.innerHTML+=item;
 }

  }
</script>
 <style>
 .title{
  font-family: verdana;
  font-weight: bold;
 }
 .itemTitle{
  font-family: verdana;
  font-size: 10pt;
 }
 .item{
  font-family: verdana;
  font-size: 10pt;
 }
 </style>
</HEAD>

<BODY>

<form>
<input id="rssPath" value="rss.xml">&nbsp;<button onclick="displayRSS(rssPath.value)">Ok</button>
</form>
 <a id="mainTitle" href="" class="title"></a><br>
 <div>
  <ul>
   <span id="items"></span>
  </ul>
 </div>
</BODY>
</HTML>

posted on Monday, October 17, 2005 12:06 PM

Feedback

# re: Displaying RSS XML as HTML using javascript 11/9/2005 3:05 PM William
This is awesome! Thanks!

# re: Displaying RSS XML as HTML using javascript 11/14/2005 7:05 PM Chris
Pointed me in the right direction on this. Thanks for the help!

# re: Displaying RSS XML as HTML using javascript 12/2/2005 3:05 PM Lino
Only drawback is that it only works on IE browser, not on Mozilla, or Opera.

# re: Displaying RSS XML as HTML using javascript 3/6/2006 2:57 AM Guy
I have a slightly different approach using XSL and javascript but it looks a lot easier to just use javascript and ditch the ugly XSL. You can find it here, it should be fairly cross browser: http://daymap.net/blog/?p=5


# re: Displaying RSS XML as HTML using javascript 5/22/2006 8:48 PM coyotewrw
Um, please forgive my noobiness, but where do I enter the url for the rss feed I want to display? For instance:
http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml

It looks like I have to click the form button to display the feed. Is there any way to make it automatic? Thanks!

# re: Displaying RSS XML as HTML using javascript 6/27/2006 8:28 AM Matt Blank
Hi,

This is a great script, but what I really want to know is how to have your rss.xml just load automatically and display on the webpage...so no form or button.

Can this be done simply and easily (without having to go through anything third party)?

Thanks!
Matt

# re: Displaying RSS XML as HTML using javascript 1/29/2007 7:49 PM Caleb
put onload="displayRSS('www.yourwebsite.com/xml.rss')" in your body tag.

# re: Displaying RSS XML as HTML using javascript 10/14/2008 5:58 AM Aric Harris
How do I buy you a pint?

I am a relative noob, that has been pushed into something where I need to pull just the first item title and link from multiple related feeds.

I do have one question, how would I use this to 1.) grab the first link, and 2.) pull entries from multiple RSS feeds and still have the combined entries in the same UL object.

This is going to help a lot.

Thanks,
Aric

# re: Displaying RSS XML as HTML using javascript 10/14/2008 7:59 AM Tim
1) remove the for loop (just the for(..){ and the } not the contents, then replace i with 0.
2) create another loop (for(...)), outside the popData function, that iterates through your list of feeds and call displayRSS for each one.

HTH
Tim

# re: Displaying RSS XML as HTML using javascript 10/14/2008 8:11 AM Aric
Again , how do I buy you a beer.

Okay, my last question (and this will get you two pints) is how to use this with FF, Mozilla, Opera as well as IE.

Thank you for your help.

Aric


# re: Displaying RSS XML as HTML using javascript 10/30/2008 7:31 PM Jaya
Thank you for your help.This is going to help a lot.
Jai

# re: Displaying RSS XML as HTML using javascript 12/20/2008 5:30 PM Andrew
Great script. However, I'm wanting to include RRS feeds from multiple site onto the one page however I cannot see how this is easily done. I have tried to copy this into to separate files and change all the parameters in each file so they don't conflict with one another, however when I pull these file together using a servers-include I only get one RSS working. From what I can see, this is becuase you can't have one than 'onLoad' command in the same file. If someone could tell my how I might be able to display multiple feeds onto the one page simultaneously it would be greatly appreciated.

# re: Displaying RSS XML as HTML using javascript 12/26/2009 11:26 PM Mr Quang
this post very good but you can get it to work on Mozilla and Opera.
please mailto: minhquang12g@gmail.com

# re: Displaying RSS XML as HTML using javascript 9/7/2010 5:00 AM Amit Pathak
In IE this is working, how to use this with FF- Mozilla.

# re: Displaying RSS XML as HTML using javascript 2/8/2012 1:05 PM Kostas V
You are using an ActiveXObject in your implementation.

ActiveX is only supported in Internet Explorer. This will not work in other browsers (and certainly not in other Operating Systems since they don't have the Windows Script Host) unless your website visitors use 3rd party plugins that enable the usage of ActiveXObjects and you have that ActiveXObject embedded in the page.

# re: Displaying RSS XML as HTML using javascript 12/20/2012 8:05 PM Guy on the internet 7 years late
Know that this post was posted back in 2005. Those who attempted to pin point the flaws of this code and the lack of compatibility should think again.

# re: Displaying RSS XML as HTML using javascript 2/25/2013 9:29 AM Shubhayu
I owe you more than 1 pint of beer. All you need to do is fly to NYC.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: