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. 

<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
 color: #dddddd;
 background: #E6E4A8;
 border: 1px solid #333333;
 padding: 5px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>