Code issues in IE

[johnnetinho]

Hi there,

I'm a JavaScript novice and would be grateful if someone could take a look at my problem and suggest any remedies.

I'm using GAjax to pull in RSS feeds but I've replicated the Javascript code 5 times on one HTML page to display 5 different feeds. The page displays fine in Firefox (Mac and Windows) but only the last set of RSS feeds in my list appears in IE. Live demo here - www.john-wardell.com/swfcgrapevine

Thanks in advance for any help
John

This is the code used to call the JS file in the HTML:

<script type="text/javascript">

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
socialfeed.addFeed("BBC News", "http://newsrss.bbc.co.uk/rss/sportonline_uk_edition/football/teams/s/sheff_wed/rss.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
socialfeed.setentrycontainer("div") //Display each entry as a DIV
socialfeed.filterfeed(4, "datetime") //Show 6 entries, sort by label
socialfeed.init() //Always call this last

</script>

This is the JS code:

var gfeedfetcher_loading_image="indicator.gif" //Full URL to "loading" image. No need to config after this line!!

google.load("feeds", "1") //Load Google Ajax Feed API (version 1)

function gfeedfetcher(divid, divClass, linktarget){
this.linktarget=linktarget || "" //link target of RSS entries
this.feedlabels=[] //array holding lables for each RSS feed
this.feedurls=[]
this.feeds=[] //array holding combined RSS feeds' entries from Feed API (result.feed.entries)
this.feedsfetched=0 //number of feeds fetched
this.feedlimit=5
this.showoptions="" //Optional components of RSS entry to show (none by default)
this.sortstring="date" //sort by "date" by default
document.write('<div id="'+divid+'" class="'+divClass+'"></div>') //output div to contain RSS entries
this.feedcontainer=document.getElementById(divid)
this.itemcontainer="<li>" //default element wrapping around each RSS entry item
}

gfeedfetcher.prototype.addFeed=function(label, url){
this.feedlabels[this.feedlabels.length]=label
this.feedurls[this.feedurls.length]=url
}

gfeedfetcher.prototype.filterfeed=function(feedlimit, sortstr){
this.feedlimit=feedlimit
if (typeof sortstr!="undefined")
this.sortstring=sortstr
}

gfeedfetcher.prototype.displayoptions=function(parts){
this.showoptions=parts //set RSS entry options to show ("date, datetime, time, snippet, label, description")
}

gfeedfetcher.prototype.setentrycontainer=function(containerstr){ //set element that should wrap around each RSS entry item
this.itemcontainer="<"+containerstr.toLowerCase()+">"
}

gfeedfetcher.prototype.init=function(){
this.feedsfetched=0 //reset number of feeds fetched to 0 (in case init() is called more than once)
this.feeds=[] //reset feeds[] array to empty (in case init() is called more than once)
this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)'
var displayer=this
for (var i=0; i<this.feedurls.length; i++){ //loop through the specified RSS feeds' URLs
var feedpointer=new google.feeds.Feed(this.feedurls[i]) //create new instance of Google Ajax Feed API
var items_to_show=(this.feedlimit<=this.feedurls.length)? 1 : Math.floor(this.feedlimit/this.feedurls.length) //Calculate # of entries to show for each RSS feed
if (this.feedlimit%this.feedurls.length>0 && this.feedlimit>this.feedurls.length && i==this.feedurls.length-1) //If this is the last RSS feed, and feedlimit/feedurls.length yields a remainder
items_to_show+=(this.feedlimit%this.feedurls.length) //Add that remainder to the number of entries to show for last RSS feed
feedpointer.setNumEntries(items_to_show) //set number of items to display
feedpointer.load(function(r){displayer._fetch_data_as_array(r)}) //call Feed.load() to retrieve and output RSS feed
}
}


gfeedfetcher._formatdate=function(datestr, showoptions){
var itemdate=new Date(datestr)
var parseddate=(showoptions.indexOf("datetime")!=-1)? itemdate.toLocaleString() : (showoptions.indexOf("date")!=-1)? itemdate.toLocaleDateString() : (showoptions.indexOf("time")!=-1)? itemdate.toLocaleTimeString() : ""
return "<span class='datefield'>"+parseddate+"</span>"
}

gfeedfetcher._sortarray=function(arr, sortstr){
var sortstr=(sortstr=="label")? "ddlabel" : sortstr //change "label" string (if entered) to "ddlabel" instead, for internal use
if (sortstr=="title" || sortstr=="ddlabel"){ //sort array by "title" or "ddlabel" property of RSS feed entries[]
arr.sort(function(a,b){
var fielda=a[sortstr].toLowerCase()
var fieldb=b[sortstr].toLowerCase()
return (fielda<fieldb)? -1 : (fielda>fieldb)? 1 : 0
})
}
else{ //else, sort by "publishedDate" property (using error handling, as "publishedDate" may not be a valid date str if an error has occured while getting feed
try{
arr.sort(function(a,b){return new Date(b.publishedDate)-new Date(a.publishedDate)})
}
catch(err){}
}
}

gfeedfetcher.prototype._fetch_data_as_array=function(result){
var thisfeed=(!result.error)? result.feed.entries : "" //get all feed entries as a JSON array or "" if failed
if (thisfeed=="") //if error has occured fetching feed
alert("Google Feed API Error: "+result.error.message)
for (var i=0; i<thisfeed.length; i++) //For each entry within feed
result.feed.entries[i].ddlabel=this.feedlabels[this.feedsfetched] //extend it with a "ddlabel" property
this.feeds=this.feeds.concat(thisfeed) //add entry to array holding all feed entries
this._signaldownloadcomplete() //signal the retrieval of this feed as complete (and move on to next one if defined)
}

gfeedfetcher.prototype._signaldownloadcomplete=function(){
this.feedsfetched+=1
if (this.feedsfetched==this.feedurls.length) //if all feeds fetched
this._displayresult(this.feeds) //display results
}


gfeedfetcher.prototype._displayresult=function(feeds){
var rssoutput=(this.itemcontainer=="<li>")? "<ul>\n" : ""
gfeedfetcher._sortarray(feeds, this.sortstring)
for (var i=0; i<feeds.length; i++){
var itemtitle="<a href=\"" + feeds[i].link + "\" target=\"" + this.linktarget + "\" class=\"titlefield\">" + feeds[i].title + "</a>"
var itemlabel=/label/i.test(this.showoptions)? '<span class="labelfield">['+this.feeds[i].ddlabel+']</span>' : " "
var itemdate=gfeedfetcher._formatdate(feeds[i].publishedDate, this.showoptions)
var itemdescription=/description/i.test(this.showoptions)? "<br />"+feeds[i].content : /snippet/i.test(this.showoptions)? "<br />"+feeds[i].contentSnippet : ""
rssoutput+=this.itemcontainer + itemtitle + " " + itemlabel + " " + itemdate + "\n" + itemdescription + this.itemcontainer.replace("<", "</") + "\n\n"
}
rssoutput+=(this.itemcontainer=="<li>")? "</ul>" : ""
this.feedcontainer.innerHTML=rssoutput
}

[jscheuer1]

This is doing nothing, remove it:

@import "all.css";

The problem is that you can only have one item per page with a given id. So, where you have:

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")

 . . .

var socialfeed2=new gfeedfetcher("example2", "example2class", "_new")

 . . .

var socialfeed3=new gfeedfetcher("example2", "example2class", "_new")

and so on, you need a unique id:

var socialfeed=new gfeedfetcher("example2", "example2class", "_new")

 . . .

var socialfeed2=new gfeedfetcher("example3", "example2class", "_new")

 . . .

var socialfeed3=new gfeedfetcher("example4", "example2class", "_new")

and so on. This will change the way the style is applied to all but the first feed, but you can fix that by adding styles to the stylesheet or by using the class designation instead of the id designation as your selector:

		.example2class div{ /*CSS specific to demo 2*/
		margin-bottom: 5px;}

	.example2class div a{ /*CSS specific to demo 2*/
		text-decoration: none;}

instead of:

		#example2 div{ /*CSS specific to demo 2*/
		margin-bottom: 5px;}

	#example2 div a{ /*CSS specific to demo 2*/
		text-decoration: none;}

These styles are doing nothing good, remove them:

	#example1 li{ /*CSS specific to demo 1*/
		margin-bottom: 4px;}

	#example3 a{ /*CSS specific to demo 3*/
		color: #D80101;
		text-decoration: none;
		font-weight: bold;
		font-family:verdana;}

	#example3 p{ /*CSS specific to demo 3*/
		margin-bottom: 2px;
		font-family:verdana;}


	code{ /*CSS for insructions*/
		color: red;
		font-family:verdana;}

[johnnetinho]

Thanks for your time and expertise - that's sorted my problem.