RSS Display Boxes alphabetical listings?

[Bluesplayer]

1) Script Title: RSS Display Boxes

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...ybox/index.htm

3) Describe problem: Is there a way to create an alphabetical output based on the titles?

[jscheuer1]

Open up the rssdisplaybox.js file in a plain text editor like NotePad and find this function (near the end):

rssdisplaybox.prototype.gatheritems=function(){
var rssdivtags=document.getElementById(this.boxid).getElementsByTagName("div") //find all div tags within RSS display box
this.pieces=[] //define array to hold items
for (var i=0; i<rssdivtags.length; i++){ //loop thru the div tags
if (rssdivtags[i].className=="rsscontainer")
this.pieces[this.pieces.length]=rssdivtags[i].cloneNode(true); //store each RSS item DIV inside array
}
this.pieces.sort(function(a, b){
	a = a.innerHTML;
	b = b.innerHTML;
	var x = a.toLowerCase(), y = b.toLowerCase();
	return x > y? 1 : x < y? -1 : a > b? 1 : -1;
});
for (var i=0, j=0; i<rssdivtags.length; i++){ //loop thru the div tags
	if (rssdivtags[i].className=="rsscontainer"){
		rssdivtags[i].parentNode.replaceChild(this.pieces[j++], rssdivtags[i]);
	}
}
this.pagecount=Math.ceil(this.pieces.length/this.uchunksize) //calculate number of pages needed to show the items
for (var i=0; i<this.pieces.length; i++)
this.pieces[i].style.display="none" //Hide all items to begin with as we figure out which should be shown per the page selected
this.chunksize=(this.uchunksize>0 && this.uchunksize <this.pieces.length)? this.uchunksize : this.pieces.length //Determine TRUE "chunk size" (# of items to show per page)
this.pagecount=Math.ceil(this.pieces.length/this.chunksize) //calculate number of "pages" needed to show the chunks
this.showpage(-1) //show no pages (aka hide all)
this.currentpage=0 //Having hidden all pages, set currently visible page to 1st page
this.showpage(this.currentpage) //Show first page
if (this.chunksize!=this.pieces.length) //if pagination links are indeed needed
this.buildpagination(this.paginatedivid)
else
document.getElementById(this.paginatedivid).style.display="none" //else, hide pagination div user has erroneously created
document.getElementById(this.boxid).style.visibility="visible"
}

Add the highlighted. Partially tested.

[Bluesplayer]

I followed the above as can be seen here: http://bluesplayer-shops.hopto.org/r...sdisplaybox.js but can't seem to get it to work. This part of my site is using the above code with the alteration inplace: http://bluesplayer-shops.hopto.org/index.php?251. As you can see the posts are not in alphabetical order. Will it alter when another post is added? Also is it possible to limit the chars in the description field?

[jscheuer1]

OK, yes you did, but the code is not being used. Also, your links for the titles are not descriptive enough - not your fault, they're PHP pages with query strings. But that means that even if it did work, they would be sorted on the query strings in those links, like:

http://bluesplayer-shops.hopto.org/read.php?5,10,10#msg-10
http://bluesplayer-shops.hopto.org/read.php?5,12,12#msg-12
http://bluesplayer-shops.hopto.org/read.php?5,13,13#msg-13

etc.

But the main problem is that the code is not being used. That's because that function, the gatheritems prototype, is only used if you specify the number of items per 'page' in the call, yours looks like so:

//MAIN FUNCTION: rssdisplaybox("rssfeed_id", "rssbox_id", "rssbox_class")
var cssdrivebox=new rssdisplaybox("shopping-appliance", "cssdriveid", "someclass")
cssdrivebox.set_items_shown(50) //Fetch and display first 10 entries
cssdrivebox.set_template("default") //Use "default" template, which outputs title + description + date
cssdrivebox.start() //Required: start script

That means it just gathers the first 50 items, no pages. So try it like so:

cssdrivebox.set_items_shown(51, 50) //Fetch and display first 10 entries

That will get it using that part of the code. We also have to create a 'manual' pagination and set its display to none. So you would have:

//MAIN FUNCTION: rssdisplaybox("rssfeed_id", "rssbox_id", "rssbox_class")
var cssdrivebox=new rssdisplaybox("shopping-appliance", "cssdriveid", "someclass")
cssdrivebox.set_items_shown(51, 50) //Fetch 51 and display first 50 entries
cssdrivebox.set_template("default") //Use "default" template, which outputs title + description + date
cssdrivebox.setpagination("manual", "mypaginatediv") //Manual pagination using id of 'mypaginatediv'
cssdrivebox.start() //Required: start script

Then you must place on your page this HTML code:

<div id="mypaginatediv" class="pagination" style="display:none!important;">
<a href="#" rel="previous">Prev</a>  <a href="#" rel="next">Next</a>
</div>

Now, as to the problem with the links not being descriptive, we can strip them (only) for sorting purposes. They will not be stripped from the displayed items. To do that we need an RE. So lets replace the gatheritems prototype function with an RE and this version of the function (additions to the already modified code highlighted):

rssdisplaybox.re = /<\S[^><]*>/g;

rssdisplaybox.prototype.gatheritems=function(){
var rssdivtags=document.getElementById(this.boxid).getElementsByTagName("div") //find all div tags within RSS display box
this.pieces=[] //define array to hold items
for (var i=0; i<rssdivtags.length; i++){ //loop thru the div tags
if (rssdivtags[i].className=="rsscontainer")
this.pieces[this.pieces.length]=rssdivtags[i].cloneNode(true); //store each RSS item DIV inside array
}
this.pieces.sort(function(a, b){
	a = a.innerHTML.replace(rssdisplaybox.re, '');
	b = b.innerHTML.replace(rssdisplaybox.re, '');
	var x = a.toLowerCase(), y = b.toLowerCase();
	return x > y? 1 : x < y? -1 : a > b? 1 : -1;
});
for (var i=0, j=0; i<rssdivtags.length; i++){ //loop thru the div tags
	if (rssdivtags[i].className=="rsscontainer"){
		rssdivtags[i].parentNode.replaceChild(this.pieces[j++], rssdivtags[i]);
	}
}
this.pagecount=Math.ceil(this.pieces.length/this.uchunksize) //calculate number of pages needed to show the items
for (var i=0; i<this.pieces.length; i++)
this.pieces[i].style.display="none" //Hide all items to begin with as we figure out which should be shown per the page selected
this.chunksize=(this.uchunksize>0 && this.uchunksize <this.pieces.length)? this.uchunksize : this.pieces.length //Determine TRUE "chunk size" (# of items to show per page)
this.pagecount=Math.ceil(this.pieces.length/this.chunksize) //calculate number of "pages" needed to show the chunks
this.showpage(-1) //show no pages (aka hide all)
this.currentpage=0 //Having hidden all pages, set currently visible page to 1st page
this.showpage(this.currentpage) //Show first page
if (this.chunksize!=this.pieces.length) //if pagination links are indeed needed
this.buildpagination(this.paginatedivid)
else
document.getElementById(this.paginatedivid).style.display="none" //else, hide pagination div user has erroneously created
document.getElementById(this.boxid).style.visibility="visible"
}

[Bluesplayer]

Brilliant work! Job done and the lists are now in alphabetical order.

[jscheuer1]

Well wouldn't you know it, I was playing around with this a bit more (because I saw your post before you edited it and was investigating strategies for that (shortening the descriptions). I came up with (among others), a css solution and thought that had to be tested in IE, and found that there were problems with the original code for sorting in IE. Seems that when IE sorts, it actually replaces some of the division elements with their innerHTML. This is loosely correct behavior for an object, so I cannot blame IE too much for this one. To fix that we need to change our sort routine a bit to:

this.pieces.sort(function(a1, b1){
	var a = a1.innerHTML.replace(rssdisplaybox.re, ''),
	b = b1.innerHTML.replace(rssdisplaybox.re, ''),
	x = a.toLowerCase(), y = b.toLowerCase();
	return x > y? 1 : x < y? -1 : a > b? 1 : -1;
});

[Bluesplayer]

Hi John

Will use your code on other parts of my site but I managed to work out a quick fix on the forums where the original code is being used (which is why I altered my previous post). I realized that shortening the descriptions would mean removing the link at the bottom which I needed to keep on show. I simply added some css styling to the div that was showing the 'quote' part of the post and any long description scrolls now as can be seen here:

http://bluesplayer-shops.hopto.org/index.php?251

I use your rssdisplaybox code a lot so will make use of your alterations elsewhere.

Thanks

[jscheuer1]

There is an error on your page in IE 7, probably other IE versions. See my previous post in this thread as to how to correct that.

[Bluesplayer]

Cheers. I use Firefox a lot and missed that problem with explorer. Fine now.