GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > RSS Feeds
Mottie (MVP) 10/23/2008 3:43 AM EST : RE: RSS Feeds
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

Ok everyone!

I rewrote the script to fix the header changing problem which I apparently could only duplicate in Internet Explorer. It still changes the order of the feeds, but now the header will match.

In the rewrite, I did change some variable names... so the previous version, "feeds" is where you defined the RSS you wanted to display - it is now "myfeeds" because I got confused going back over the code LOL

You only need to use this new code if you are showing multiple feeds.

Jizmak-Rebirth (New Admin) 10/23/2008 4:55 AM EST : RE: RSS Feeds
Posts: 1157
Zomgawsh Poster

Thx for the update... as long as the headers are staying with the feeds, thats good enough for me!  Thx for your help.

Avandius (New Admin) 10/24/2008 8:16 AM EST : RE: RSS Feeds
Posts: 337
Fingers of Fury!

Yet another problem, my tooltips disappeared on the Feeds. They were gone before i changed to the most recent script. Any ideas? 

Mottie (MVP) 10/26/2008 6:43 PM EST : RE: RSS Feeds
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

RSS Feed Box v1.1 | RSS Feed Box v1.2 | RSS Feed Box v1.3 | RSS Feed Box v1.4

RSS Feed Box v1.2

This version is updated because some RSS Feeds are extremely long (*cough* WarHerald *cough*) and the preview tooltip ends up going off the screen. This only has minor changes from the original version, but I named it version 1.2 ummm because like OMG it's like way different from the very first version o.O

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; }
<script type="text/javascript" src=""></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","",5]);
myfeeds.push (["WoW Blues Comments","",6]);
myfeeds.push (["New Movies this week","",7]);
myfeeds.push (["Warhammer Current News","",10]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
function feedResult(currentFeed) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 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]); }
  • "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.


Avandius (New Admin) 10/27/2008 8:18 AM EST : RE: RSS Feeds
Posts: 337
Fingers of Fury!

Thanks so much Mottie, you have no idea how much i appreciate your work on this. I've learned so much and i feel like coming here to the GP Admin is a reliable way to get things fixed!

Avandius (New Admin) 10/30/2008 6:48 AM EST : RE: RSS Feeds
Posts: 337
Fingers of Fury!

Alright i think i got the RSS tooltips where i want them. Check em out here.

Mainly the ones under WoW insider i tried to form up perfectly, however is there a way to make them a little longer, increasing the character limit doesnt seem to help and the "Click for more info" seems to adopt the formmating of the document rather than remaining consistent.

Also i know its prolly impossible and may suck up alot of bandwitdth but is it possible make the youtube vids play, within the tooltip, if you hover on that title for 5 seconds?

Still wanting to know what is poping the errors, there are about 6 of them according to the bottom left error icon. Which i think is causing the problem with the guildbar. FF seems to have no problem. I'm starting to adopt your hate for IE. Sadly i work at Microsoft and alot of the spreadsheets i use will not work on other browsers.

Mottie (MVP) 10/30/2008 11:01 AM EST : RE: RSS Feeds
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

I'm not sure what you mean by making them a little longer... the character limit on the feed has no limit, I mean you could set it to a million if you wanted... might I suggest making the tooltip wider maybe, then increase the character limit.

I could add some code to search for any youtube videos and make them autoplay inside the tooltip, but why? The tooltip is meant to be a preview. I was looking for an example feed with a video, but couldn't find one, but if you want to your own site feed to autoplay the videos just add the code in red to the embed source you get from YouTube. Notice that you add it inside the <embed> code source (src) URL. And you only need to add it to the <embed> and not the <param>.
<object width="425" height="344"><param name="movie" value=""></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
The only solution to the "(click for more info)" formatting problem would be to use an image instead... If I made the script smart enough to figure out where to inject the click message, it would get too long and increase the chance it won't work on all browsers, so just do this:
var readMoreMessage = "...<br><br><img align=right src="CLICK_IMAGE.GIF">";
Sorry I don't have an image to put in there yet.

And last, but not least, I'm still looking into your GuildBar problem...


Avandius (New Admin) 10/30/2008 12:16 PM EST : RE: RSS Feeds
Posts: 337
Fingers of Fury!

Hmm, alright ill see if i can make it work if i really want too. I suppose they could just click the link if they want to see it. Thanks any how.

I'll use the image thing for sure. Thanks!


Avandius (New Admin) 11/4/2008 3:23 AM EST : RE: RSS Feeds
Posts: 337
Fingers of Fury!

Is there a way to make tooltip boxes have rounded corners?

Mottie (MVP) 11/4/2008 11:09 AM EST : RE: RSS Feeds
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

You make me the borders and I'll add it for you 

Admins Online
There are   members online.
So-and-so has logged on!