RSS Feed Box v1.2

The Code

<div id="feedText1"></div>
<style type=text/css>
.feedTitle { color: #999999; }
.feedDate { color: #3A5894; text-size: 12pt; }
.feedDesc { color: #999999; text-size: 8pt; padding: 5px; }
.feedDesc img { max-width: 550px; }

#feedText1 {font-size:8pt;}
#feedText1 a:link { color: #3A5894; text-decoration: none; }
#feedText1 a:visited { color: #354973; text-decoration: none; }
#feedText1 a:hover { color: #354973; text-decoration: none; }
#feedText1 a:active { color: #3A5894; text-decoration: none; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
var myfeeds = new Array();

var feedBox = "feedText1";
var tooltipWidth = 560;

var previewMode = true;
var previewLength = 500;
var readMoreMessage = "...<br><br><div align=right>(click for more info)</div>";

myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",5]);
myfeeds.push (["WoW Blues Comments","http://www.wowblues.com/feed.xml",6]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",7]);
myfeeds.push (["Warhammer Current News","http://feeds.warhammeronline.com/warherald/RSSFeed.war?type=current",10]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
  feedResult(myfeeds[k]);
 }
function feedResult(currentFeed) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == "") ? (result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = "<div class='feedTitle'>" + ftitle + "</div>";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j < items.length; j++) {
    var titleElement = items[j].getElementsByTagName("title")[0];
    var xtitle = titleElement.firstChild.nodeValue;

    var titleElement = items[j].getElementsByTagName("link")[0];
    try {var xlink = titleElement.firstChild.nodeValue;} catch(e) {xlink = "";}

    var titleElement = items[j].getElementsByTagName("pubDate")[0];
    try {var pubDate = titleElement.firstChild.nodeValue;} catch(e) {pubDate = "";}

    var titleElement = items[j].getElementsByTagName("description")[0];
    try {var descript = titleElement.firstChild.nodeValue;} catch(e) {descript = "";}

    pubDate = pubDate.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");
    descript = descript.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");

    if (previewMode) {
     var dStart = descript.indexOf("<br>") + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }

    var feedPopup = '<div class=feedDate>' + pubDate + '</div><div class=feedDesc>' + descript + '</div>';

    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a href="' + xlink + '" =\"ddrivetip(\'' + feedPopup + '\', \'\', \'';
    feedText += tooltipWidth + '\');\" ="hideddrivetip();">' + xtitle + '</a></div>';
   }
   feedText += '<br>';
   document.getElementById(feedBox).innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
</script>

Customizing

• "feedText1" (in blue) should be changed if you use this code more than once on a page (e.g. if you have a second RSS Feed box on a page, change this to "feedText2"). I moved the "<div>" to the top of the code, so it's all together.
  
  
• Change the CSS styles in purple to match your site.
  
  
• Adjust the "tooltipWidth" value (in red) to your desired tooltip width. Note the ".feedDesc img" class a "max-width" to limit the size of any images that may be included in the feed - make this slightly smaller than your tooltipwidth value (this only works with non-IE browsers).
  
  
• Preview Mode:
  
  
• Turn preview mode on and off by setting the "previewMode" to true or false respectively (in teal).
  
  
• Adjust the length of the feed, "previewLength", shown in the tooltip to the number of characters to display (in red). Note: This number also includes any HTML code, such as <font> or <span>. So it may need to be adjusted to your liking.
  
  
• Change the "readMoreMessage" to your liking. The default text will add the ellipses (three dots) followed by several returns and a right side aligned message to click the link for more info.
  
  "...<br><br><div align=right>(click for more info)</div>"
  
  
• Add your feed RSS links as follows:
  
  feeds.push (["Feed Title","Feed URL",#]);
  
  
• To add more feeds, add a block that looks like the above example
  
  
• Replace the text in (orange) with your feed RSS URL.
  
  
• Replace the number (in red) with the number of lines from each feed you want to display.

RSS Feed Box v1.41 (Two Column)

• I made a table with the class "feedBox" that has two columns.
  • The very first feed is added to the Recent Post side of the table (right)
  • All additional feeds are placed in the RSS News Feed Column (left)
  • You can make separate divs or switch the classes in the table however you want. Just make sure the ID is unique (only one per page)
• Made the tooltip border larger since I was seeing the background repeat on some posts
• Added the author's name to the tooltip

The Code

<table width="100%" class="feedBox">
 <tr>
  <td id="feedText1" width="50%" valign="top"></td>
  <td id="recentPosts" valign="top"></td>
 </tr>
</table>

<style type="text/css">
.feedTitle { color: #ffffff; }
.feedDate { color: #ffcc00; }
.feedDesc { color: #ffffff; padding: 5px; }
.feedDesc img { max-width: 550px; width: auto !important; width: 550px; }

.feedBox { font-size:12pt; width:800px; }
.feedBox a:link { color: #ffcc00; text-decoration: none; }
.feedBox a:visited { color: #ffcc00; text-decoration: none; }
.feedBox a:hover { color: #ffffff; text-decoration: none; }
.feedBox a:active { color: #ffcc00; text-decoration: none; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function(){rssfeedbox()});
function rssfeedbox(){
 var myfeeds = new Array();

var feedTxt = "feedText1";
var tooltipWidth = 560;

var previewMode = false;
var previewLength = 800;
var readMoreMessage = "...<br><br><img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>";

var addAuthorInline = false;
var addDateInline = false;

// The first feed should be your "recent posts" RSS feed link
myfeeds.push (["Recent Posts","http://guildportal.com/RSS/Feed.aspx?Type=GuildForumsMR&ID=258012",10]);

// The remaining feeds will go into your news feed box
myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",4]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",5]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
  var feedoutpt = (k==0) ? $('#recentPosts') : $('#'+feedTxt);
  feedResult(myfeeds[k],feedoutpt);
 }

function feedResult(currentFeed,feedoutpt) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == '') ? (result.xmlDocument.getElementsByTagName('title')[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = '<div class="feedTitle">' + ftitle + '</div>';
   var items = result.xmlDocument.getElementsByTagName('item');

   for (var j = 0; j < items.length; j++) {
    var xtitle = $(items[j]).find('title').text();
    var xlink = $(items[j]).find('link').text();
    var pubDate = $(items[j]).find('pubDate').text();
    var author = $(items[j]).find('author').text();
    var descript = $(items[j]).find('description').text();

    pubDate = pubDate.replace(/\"/g,"\'");
    descript = descript.replace(/\"/g,"\'");

    if (previewMode) {
     var dStart = descript.indexOf('<br>') + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }

    var feedPopup = '<span class=feedDate>' + pubDate + '</span>';
    feedPopup += (author=='') ? '' : ' by ' + author;
    feedPopup += '<div class=feedDesc>' + descript + '</div>';

    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a class="tooltip" href="' + xlink + '" title="' + feedPopup + '" rel="' + tooltipWidth + '">' + xtitle + '</a>';
    feedText += (addAuthorInline) ? ' by ' + author : '';
    feedText += (addDateInline) ? ' on ' + pubDate : '';
    feedText += '</div>';
   }
   feedText += '<br>';
   $(feedoutpt).append(feedText);
  } else { alert ('feed error from ' + currentFeed[0]); }
 });
 }
}
</script>

• This update of (v1.41) replaces the tooltips with the newer script ( you probably won't notice a difference)
• I also added two variables: addDateInline & addAuthorInline
  
  var addAuthorInline = false;
  var addDateInline = false;
  
  setting either of these to true will add the author or the date of the post to the feed box (visible without hovering over the title).
• The rest of the instructions for this is basically the same as the other feed posts with minor changes in the CSS.