• 0

[Javascript] Doesn't render correctly on Firefox


Question

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 by Koopie

13 answers to this question

Recommended Posts

  • 0

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

&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/2009/february/ulduarweap/small/ulduar_bow_01.jpg" /&gt;
&lt;/a&gt;

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

  • 0

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 by Koopie
  • 0

Try this for me please.

&lt;div id="feed"&gt;&lt;/div&gt;
&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;

  • 0

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.

  • 0

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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
   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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
   var items = result.xmlDocument.getElementsByTagName("item");

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

  • 0
  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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
	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 = "&lt;div class='feedTitle'&gt;" + ftitle + "&lt;/div&gt;";
	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.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Using NASA’s IXPE telescope and a fleet of observatories, scientists discovered that the system’s intense X-rays don’t come from its glowing accretion disk as previously believed, but from a chaotic, high-speed wind of particles hurled out by the pulsar itself. The findings challenge old models and reveal a single, powerful mechanism behind the pulsar’s radiation. It’s a dramatic twist in our understanding of how dead stars can still light up the universe. A global team of astronomers has made a significant discovery about how the energetic remains of exploded stars interact with the space around them. Using NASA’s IXPE (Imaging X-ray Polarimetry Explorer) along with several other observatories, researchers gathered new insights into this dynamic cosmic behavior. The scientists, working across the United States, Italy, and Spain, focused their investigation on a puzzling stellar system known as PSR J1023+0038, or simply J1023. This system features a rapidly spinning neutron star that draws material from a smaller companion star. As a result, an accretion disk of matter has formed around the neutron star. The neutron star also functions as a pulsar, emitting intense beams of radiation from its magnetic poles as it spins, creating a pattern that resembles a lighthouse sweeping through space. What makes J1023 especially important is that it switches between two distinct phases. https://scitechdaily.com/nasa-just-discovered-where-these-mysterious-space-x-rays-really-come-from/    
    • Artifacts from the Iron Age have revealed an intense historical magnetic anomaly in the Middle East. Could using a similar approach elsewhere help us unravel the mysteries of Earth's magnetic field? Ben-Yosef, an archaeologist at Tel Aviv University, had been working in southern Jordan with Ron Shaar, who was analyzing archaeological materials around the Levant. Shaar, a geologist at The Hebrew University of Jerusalem, was building a record of the area's magnetic field. The hunk of copper slag — a waste byproduct of forging metals — they found recorded an intense spike in Earth's magnetic field around 3,000 years ago. Shaar worked hard to give them more evidence. After they had analyzed and described samples from around the region for more than a decade, the anomaly was accepted by the research community and named the Levantine Iron Age Anomaly (LIAA). From about 1100 to 550 B.C., the magnetic field emanating from the Middle East fluctuated in intense surges. https://www.livescience.com/archaeology/earths-magnetic-field-is-weakening-magnetic-crystals-from-lost-civilizations-could-hold-the-key-to-understanding-why
    • Designed by former F1 engineers. Pure danger. A company made up of former F1 racing engineers has unveiled an outrageous e-scooter that can reach a top speed of north of 100 miles per hour — and covers a whopping 150 miles on a single charge. The bizarre contraption, dubbed The Turbo, was developed by UK-based e-scooter company Bo, whose existing lineup targets the more premium end of the last-mile — or last 150 miles, in this case — mobility market. The Turbo's specs are borderline hard to believe. The metal-clad and girthy two-wheeler features a 24,000-watt dual-motor engine and an enormous 1,800-watt-hour battery. Aerodynamic air intakes funnel wind to keep everything cool. https://futurism.com/the-byte/100-mph-escooter-hazard    
    • Apple was waiting for Samsung to refine the technology. Now, they will ask Samsung to make their screen. Amazing...
  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      Michael Scrip
      203
    3. 3
      ATLien_0
      197
    4. 4
      Xenon
      136
    5. 5
      +FloatingFatMan
      116
  • Tell a friend

    Love Neowin? Tell a friend!