[Javascript] Doesn't render correctly on Firefox

[Koopie]

I'm part of a world of warcraft guild, with a website hosted on guildportal.com. While trying to improve our website, i've implemented a custom rss feed that would pull the most current WoW news from mmo-champion.com to my frontpage. The script works correctly, but the problem is that on firefox, the feed gets cut off, while on IE (7 or 8) and chrome, it displays the full feed correctly.

My script is:

<div id="feed"></div>

&lt;script type="text/javascript" src="https://www.google.com/jsapi"></script>;script type="text/javascript"&gt;
google.load("feeds");
$(document).ready(function() {
var myfeeds = new Array();

var feedBox = "feed";
var tooltipWidth = 560;

var previewMode = true;
var previewLength = 80000;
var readMoreMessage = "...&lt;br&gt;&lt;br&gt;&lt;img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>;";

myfeeds.push (["MMO-Champion","http://www.mmo-champion.com/index.php?type=rss;action=.xml;board=2.0;sa=news;",1// **************************************
// Do not change anything below this line
// **************************************
var ttcss = "#dhtmltooltip";
var ttBrdr = $(ttcss).css("border-width");
var ttBkgd = $(ttcss).css("background-color");
$("#"+feedBox)
 .mouseover(function(){$(ttcss).css("border-width","0").css("background-color","transparent")})
 .mouseout (function(){$(ttcss).css("border-width",ttBrdr).css("background-color",ttBkgd)});
 for (var k = 0; k &lt; 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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j &lt; 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,"\'").replace(/\"/g,'\"');
   descript = descript.replace(/'/g,"\'").replace(/\"/g,'\"');

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

	var feedPopup = '&lt;div&gt;&lt;table class=tooltip&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=tooltiplt&gt;';
	feedText += '&lt;div class=feedDate&gt;' + pubDate + '&lt;/div&gt;&lt;div class=feedDesc&gt;' + descript + '&lt;/div&gt;';
	feedText += '&lt;/td&gt;&lt;td class=tooltiprt&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=tooltiplb&gt; &lt;/td&gt;';
	feedText += '&lt;td class=tooltiprb&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;';


   }
   feedText += '&lt;br&gt;';
   document.getElementById(feedBox).innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
&lt;/script&gt;

Does anyone have a clue on what it might be wrong?

My guild website is cont.guildportal.com if you want to see the script live to confirm the bug, its just below the news on the frontpage.

Thanks in advance.

Edited February 25, 2009 by Koopie

[Koopie]

Even if i don't like to do this, /bump.

Tried to switch around the code and still no luck,

[karma]

Cant see any feed right now!!

[Koopie]

  karma said:

Cant see any feed right now!!

Sorry about that, was trying to change the code around yesterday and disabled it since the result was still the same. Its up now if you want to check.

[karma]

It is not showing in Firefox because there is an error in the feed here

&lt;a target="_blank" href="http://static.mmo-champion.com/mmoc/images/news/2009/february/ulduarweap/ulduar_bow_01.jpg">;img src="https://static.mmo-champion.com/mmoc/images/news/200</div"/>;/a&gt;

that should be

<a target="_blank" href="http://static.mmo-champion.com/mmoc/images/news/2009/february/ulduarweap/ulduar_bow_01.jpg">;img src="https://static.mmo-champion.com/mmoc/images/news/2009/february/ulduarweap/small/ulduar_bow_01.jpg" />
</a>

Internet Explorer ignores it and carries out the rest of the presentation but Firefox stops at that point.

[Koopie]

Well but thats the problem, the feed does not have errors, you can check the feed code directly from the feed link. http://www.mmo-champion.com/index.php?type...rd=2.0;sa=news;

Somehow, the code above is cutting the feed on firefox but not on chrome/ie and probably not on opera too.

Edit: Made the code display 2 feed entries so the problem is more visible. As you can see, the "description" field of the rss is getting cut on firefox but not on the rest of the browsers.

Edited February 25, 2009 by Koopie

[karma]

what happens when you add that code to a page on its own without the rest of your site?

[Koopie]

Still doesn't work, i tried to parse the javascript into a validator, it did found some errors but dont thing they are relevant (http://www.jslint.com/)

[karma]

Try this for me please.

<div id="feed"></div>
&lt;script type="text/javascript" src="https://www.google.com/jsapi"></script>;script type="text/javascript"&gt;

google.load("feeds");
$(document).ready(function() {
var myfeeds = "new Array()";

var feedBox = "feed";
var tooltipWidth = 560;

var previewMode = true;
var previewLength = 80000;
var readMoreMessage = "...&lt;br&gt;&lt;br&gt;&lt;img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>;";

myfeeds.push (["MMO-Champion","http://www.mmo-champion.com/index.php?type=rss;action=.xml;board=2.0;sa=news;",1// **************************************
// Do not change anything below this line
// **************************************
var ttcss = "#dhtmltooltip";
var ttBrdr = $(ttcss).css("border-width");
var ttBkgd = $(ttcss).css("background-color");
$("#"+feedBox);
.mouseover(function(){$(ttcss).css("border-width","0").css("background-color","transparent")});
.mouseout (function(){$(ttcss).css("border-width",ttBrdr).css("background-color",ttBkgd)});
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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j &lt; 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,"\'").replace(/\"/g,'\"');
   descript = descript.replace(/'/g,"\'").replace(/\"/g,'\"');

	if (previewMode) {
	 var dStart = descript.indexOf("&lt;br&gt;") + previewLength;
	 if (descript.length &gt; dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
	}
for (var k = 0; k &lt; myfeeds.length; k++) {
  feedResult(myfeeds[k]);
}
	var feedPopup = '&lt;div&gt;&lt;table class=tooltip&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=tooltiplt&gt;';
	feedText += '&lt;div class=feedDate&gt;' + pubDate + '&lt;/div&gt;&lt;div class=feedDesc&gt;' + descript + '&lt;/div&gt;';
	feedText += '&lt;/td&gt;&lt;td class=tooltiprt&gt; &lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=tooltiplb&gt; &lt;/td&gt;';
	feedText += '&lt;td class=tooltiprb&gt; &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;';


   }

   feedText += '&lt;br&gt;';
   document.getElementById(feedBox).innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
});
}
});

&lt;/script&gt;

[Koopie]

The feed doesn't load with that code. I did noticed you added a couple of ; and changed the array part and also deleted a few stuff, tried to revert things one by one and it did not loaded. I'm currently clueless why this problem happens. Appreciate your help karma.

[karma]

Can you add the original code onto a blank page and link me to it please?

[Koopie]

  karma said:

Can you add the original code onto a blank page and link me to it please?

Sorry, been away for a little trip during this weekend, ill get this done when i reach my hands to a pc.

[Banjo]

Try change this:

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");

to this:

feed.load(function(result) {
  if (!result.error) {
   result.xmlDocument.normalize();
   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");

It's hard for me to test because of all the linked Javascript files

[Koopie]

  Banjo said:

Try change this:

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");

to this:

feed.load(function(result) {
   if (!result.error) {
	result.xmlDocument.normalize();
	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");

It's hard for me to test because of all the linked Javascript files

This did the trick, however, only on firefox. With the "result.xmlDocument.normalize();", the feed does not load on IE.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Tue, 3 Mar 2009 15:53:07 UTC


Message: Object doesn't support this property or method
Line: 685
Char: 4
Code: 0
URI: http://cont.guildportal.com/Guild.aspx?GuildID=51848&TabID=453954

Line 685 is the "result.xmlDocument.normalize();"

Just arrived home, so will try to make the blank page with the feed javascript only so its easier.