gfeedfetcher description

[danskkr]

1) Script Title: gfeedfetcher

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...sdisplayer.htm

3) Describe problem: I posted this also in javascript before I realised it was best suited here.

In the last function of gfeedfetcher, which creates a list of RSS items which are then displayed as an unorder list on a seperate html page. Is it possible to store the var itemdescription from each list entry created here which I can could then access and display individually in a totally different div?

gfeedfetcher.prototype._displayresult=function(feeds){
        var rssoutput=(this.itemcontainer=="<li>")? "<ul class='edgetoedge'>\n" : ""
        gfeedfetcher._sortarray(feeds, this.sortstring)
        for (var i=0; i<feeds.length; i++){
                //var itemtitle="<a rel=\"nofollow\" href=\"" + feeds[i].link + "\" target=\"" + this.linktarget + "\" class=\"titlefield\">" + feeds[i].title + "</a>"
                 var itemtitle="<a href=#itempage>" + 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 + itemdescription + "\n" + this.itemcontainer.replace("<", "</") + "\n\n"
                        
        }
        rssoutput+=(this.itemcontainer=="<li>")? "</ul>" : ""   
        this.feedcontainer.innerHTML=rssoutput  		
}

I know a little jquery but boy this javascript is hard... I'm tearing my hair out here!

[ddadmin]

Since the results are loaded asynchronously (meaning we don't know exactly when they are going to be loaded), the easiest way to go about displaying portions of the RSS feeds elsewhere on the page is by modifying the gfeedfetcher.prototype._displayresult() function inside the .js file. This function is invoked when the results have been fully loaded and ready to be shown, hence this is the best place to add in additional code of your own.

Lets say you wish to extend Example 1 on the script page so the description for the 1st, 5th, and 3rd RSS entries are also shown in DIVs of their own on the page:

<h3>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, sort by <code>title</code>)</h3>

<script type="text/javascript">

var cssfeed=new gfeedfetcher("example1", "example1class", "")
cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("li") //Display each entry as a list (li element)
cssfeed.filterfeed(10, "title") //Show 10 entries, sort by date
cssfeed.init() //Always call this last

</script>

<br /><br />

RSS Description for <b>1st</b> RSS Entry:
<div id="desc1"></div>

RSS Description for <b>5th</b> RSS Entry:
<div id="desc5"></div>


RSS Description for <b>3rd</b> RSS Entry:
<div id="desc3"></div>

In other words, inside the DIVs highlighted in red. To do this, you'd modify _displayresult() with the below changes:

gfeedfetcher.prototype._displayresult=function(feeds){
	var descs=['desc1', 'desc5', 'desc3']
	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
	for (var i=0; i<descs.length; i++){
		var entryindex=parseInt(descs[i].match(/\d+$/i).shift())-1
		document.getElementById(descs[i]).innerHTML=feeds[entryindex].content
	}
}

The changes tell the script to loop through the array containing the DIV ids [['desc1', 'desc5', 'desc3'], then populate each one with the description of each RSS entry specified by the numeric integer at the end of the ID, so 1=1st entry, 5=5th entry etc. The end result is that these DIVs will now be populated with the respected entry's description.

[danskkr]

Wow - nice one DDAdmin. I was up all night and was almost there - but yours is so much simpler and so much cleaner. Many thanks..!!

Now I just need to link the desc you created to the RSS listtitle created so that when I click on <li> item1, it takes me to desc1 <li>item2 to desc2 etc...any ideas? At the moment I'm trying to use a jquery click event to append the related desc into a div.

[ddadmin]

If I understood you correctly, you wish to modify the title links in the original RSS output so they link to (jump to) the description DIVs that you've defined on the same page. If so, firstly, you'll want to modify the markup of your description DIV containers so they contain anchor links:

RSS Description for <b>1st</b> RSS Entry:
<div id="desc1"><a name="desc1"></a></div>


RSS Description for <b>5th</b> RSS Entry:
<div id="desc5"><a name="desc5"></a></div>


RSS Description for <b>3rd</b> RSS Entry:
<div id="desc3"><a name="desc3"></a></div>

Then use the below modified displayresult() function:

gfeedfetcher.prototype._displayresult=function(feeds){
	var descs=['desc1', 'desc5', 'desc3']
	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 itemtitle="<a href=\"#desc" + (i+1) + "\" 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
	for (var i=0; i<descs.length; i++){
		var entryindex=parseInt(descs[i].match(/\d+$/i).shift())-1
		document.getElementById(descs[i]).innerHTML=feeds[entryindex].content
	}
}

The additional changes are highlighted in red.

[danskkr]

Thanks again for your help! I've left a couple of posts on DD forums in the past but never seemed to get any response at all, so its really nice to get some help learning this stuff - i'm a html/css coder who got thrown in the jqueryjavascript deep end...

Its not ideal but i've almost got it working by turning each desc into panels:

<!-- item description page -->
<div class="panel" title="Item Page" id="desc1">
<div class="toolbar">
<h1><img src="images/Alpha-Plus.png" width="113" height="45" alt="Alpha Plus Group"></h1>
<a href="#" class="back">Back</a> </div>
<div class="s-scrollwrapper">
<div>
<a name="desc1"></a>
</div>
</div>
</div>

The first item (desc 1) seems to work fine (although but all the others get errant results like just the date or the positioning of the itemdescription contents being all out of whack..

I'm trying to gauge whats going on in your code - I can see how you set up an empty array but not sure how you get the itemdescriptions in there. Is it feeds[entryindex].content you are using? Could it be that the feeds[i].content is not formated correctly and thats causing the problems?
Also could the two i variables you've used be clashing?

EDIT: The layout issue I think is mainly just a problem with the JQT framework i've used, but I think i fixed it, but the seemingly random descriptions seem to be because each descs variable is being created 3 times, for itemtitle, itemdate and for the only one I want, the content description. Still trying to figure out a way around this..

[ddadmin]

Each itemdescriptions variable is populated with either:

feeds[entryindex].content

OR

feeds[entryindex].contentSnippet

which contain the description of the RSS entry at that index, with the difference being the former is the longer form of the later. These two properties are part of Google Feed API's returned data set.

The layout issue I think is mainly just a problem with the JQT framework i've used, but I think i fixed it, but the seemingly random descriptions seem to be because each descs variable is being created 3 times, for itemtitle, itemdate and for the only one I want, the content description. Still trying to figure out a way around this..

By each descs variable being created 3 times, what do you mean? Are you saying you have 3 DIVs for example that all need to include the description of the first RSS entry, for example:

<div id="desc1"><a name="desc1"></a></div>
<div id="desc1"><a name="desc1"></a></div>
<div id="desc1"><a name="desc1"></a></div>

In the above case, the same ID attribute is used in all 3 DIVs (which isn't allowed). Is that what you mean?

[danskkr]

Sorry if I was not so clear. No, theres no problem with the DIV's (out of interest; what was the reason you used a a name and not class?) or with your code - its just splitting the feed up too much.
I see how you used the feeds[entryindex].content to supply the description, but it throws out 3 of each desc[i] - one for the item title, the label and lastly the bit I want, the itemdescription. What I'm getting at the moment is:

<div class="desc1 panel"><a name="desc1"> Item 1 title  </a></div>
<div class="desc2 panel"><a name="desc2"> Item 2 title  </a></div>
<div class="desc3 panel"><a name="desc3"> Item 3 title  </a></div>
<div class="desc2 panel"><a name="desc2"> Item 1 date  </a></div>
<div class="desc3 panel"><a name="desc3"> Item 2 date  </a></div>

etc.. (I will be having at least 12 items)

I've been trying to save the var itemdesciption as a global variable with an index number or even in localstorage but I can't seem to get it to replace feeds[entryindex].content. I think that would totally fix it if I find away to do that.

[danskkr]

Ah - it was because I have 3 different gfeed functions getting called all at once. Your code works great, I just have to figure out how to send the right feed.content to the right place. Tricky when as you said it loads the feeds asynchronously.

cheers for your help!