Geeks With Blogs

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

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 ASP.NET , XML, XSL, etc , Never mind the bollocks here's the RSS | Back to top


Comments on this post: Displaying RSS XML as HTML using javascript

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
This is awesome! Thanks!
Left by William on Nov 09, 2005 3:05 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
Pointed me in the right direction on this. Thanks for the help!
Left by Chris on Nov 14, 2005 7:05 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
Only drawback is that it only works on IE browser, not on Mozilla, or Opera.
Left by Lino on Dec 02, 2005 3:05 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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
Left by Guy on Mar 06, 2006 2:57 AM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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!
Left by coyotewrw on May 22, 2006 8:48 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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
Left by Matt Blank on Jun 27, 2006 8:28 AM

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

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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
Left by Aric Harris on Oct 14, 2008 5:58 AM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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
Left by Tim on Oct 14, 2008 7:59 AM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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
Left by Aric on Oct 14, 2008 8:11 AM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
Thank you for your help.This is going to help a lot.
Jai
Left by Jaya on Oct 30, 2008 7:31 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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.
Left by Andrew on Dec 20, 2008 5:30 PM

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

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
In IE this is working, how to use this with FF- Mozilla.
Left by Amit Pathak on Sep 07, 2010 5:00 AM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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.
Left by Kostas V on Feb 08, 2012 1:05 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
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.
Left by Guy on the internet 7 years late on Dec 20, 2012 8:05 PM

# re: Displaying RSS XML as HTML using javascript
Requesting Gravatar...
I owe you more than 1 pint of beer. All you need to do is fly to NYC.
Left by Shubhayu on Feb 25, 2013 9:29 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net | Join free