Solved

How do I make RSS feed in Widget display in revers chronological order?

Posted on 2008-10-24
6
495 Views
Last Modified: 2013-12-08
I created a widget based upon Javascript code I examined in a pre-existing widget. (I am something of a newbie and just have a basic understanding of Javascript.) The widget reads an RSS feed from a Discussion Forum located on a secure server. When I look at the feed results using the RSS Reader in IE7, the results are in reverse chronological order (newest to oldest) like I want. However, when I view the source, the results are oldest to newest. I need to know how to programmatically reverse the order so that the results show up in my widget from newest to oldest.

Below are snippets from my HTML code and my Javascript code as well as a screenshot of the widget. I had to block out some stuff because this comes from a secure environment.
<html>

<head>

<title>Director's Blog Widget</title>

    <script src="script1.js"></script>

    <style>

        body {font:8pt arial;margin:0;}

        #widgetBody {position:relative;background:url(bg.png) no-repeat;width:240px;height:299px;}

        #textWindowBox {position:absolute;top:75px;left:15px;width:200px;height:221px;overflow:hidden}

        #textWindow {position:relative;padding-top:7px;}

        #scrollBarBox {position:absolute;width:12px;height:216px;top:74px;left:221px;}

        #scrollBar {position:relative;width:12px;height:40px;background:url(scroll.jpg) no-repeat;}

        #ahome {position:absolute;top:52px;left:150px;width:75px;height:14px;cursor:pointer;background-color:transparent;}

        #home a {display:block;width:75px;height:14px;}

        .dragme{position:relative;}

        .itemBlock {margin:0 0 3px 0;padding:0 0 4px 0;border-bottom:1px dotted #adafb3;}

        .itemDate {color:#666;font-size:.9em;line-height:1.1em;}

        .itemTitle {font-weight:bold;line-height:1.1em;}

        .itemTitle a {text-decoration:none;color:#254a7d;}

        .itemDescription {}

    </style>

</head>

<body onLoad="init()">
 

<div id="widgetBody">

	<div id="home"><a href="url" target="_blank"></a></div>

	<div id="textWindowBox">

		<div id="textWindow">

			<div id="outputBlock"></div>

		</div>

	</div>

	<div id="scrollBarBox">

		<div id="scrollBar" class="dragme"></div>

	</div>

	<div style="clear:both;"></div>

</div>
 

<script language="javaScript">getData(2)</script>
 

</body>

</html>
 

---------------------------------------

//XML CODE
 

var http_request = false;

var dataFileName;
 

dataFileName = "rss source from Discussion Forum";
 
 
 

function getData(dataFileIndex) {

	if (window.ActiveXObject) { //IE

		http_request = new ActiveXObject("Microsoft.XMLHTTP");

	} else if (window.XMLHttpRequest) { //other

		http_request = new XMLHttpRequest();

	} else {

		alert("your browser does not support AJAX");

	}

	http_request.open("GET",dataFileName,true);

	http_request.setRequestHeader("Cache-Control", "no-cache");

	http_request.setRequestHeader("Pragma", "no-cache");

	http_request.onreadystatechange = function() {

		if (http_request.readyState == 4) {

			if (http_request.status == 200) {

				if (http_request.responseText != null) {

					processRSS(http_request.responseXML);

				} else {

					alert("Failed to receive RSS file from the server - file not found.");

					return false;

				}

			}

		}

	}

	

	http_request.send(null);

}
 

function processRSS(rssxml) {

	RSS = new RSS2Channel(rssxml);

	outputData(RSS);

}
 

function RSS2Channel(rssxml) {

	this.items = new Array();

	var itemElements = rssxml.getElementsByTagName("item");

	

	for (var i=0; i<itemElements.length; i++) {

		Item = new RSS2Item(itemElements[i]);

		this.items.push(Item);

	}

}
 

function RSS2Item(itemxml) {

    this.title;

    this.link;

    this.description;

    this.pubDate;

    this.channel;
 

    var properties = new Array("title", "link", "description", "pubDate", "channel");

    var tmpElement = null;

    for (var i=0; i<properties.length; i++) {

        tmpElement = itemxml.getElementsByTagName(properties[i])[0];

        if (tmpElement != null) {

            eval("this."+properties[i]+"=tmpElement.childNodes[0].nodeValue");

		}

    }

}
 

function outputData(RSS) {

	dataString = "";

    for (var i=0; i<RSS.items.length; i++) {

		dataString += "<div class='itemBlock'>";

		newDate = new Date(RSS.items[i].pubDate);

		dateString = (newDate.getMonth()+1) + "/" + newDate.getDate() + "/" + newDate.getFullYear();

		dataString += "<div class='itemDate'>" + dateString + "</div>";

		dataString += "<div class='itemTitle'><a href='" + RSS.items[i].link + "' target='afps_news'>" + RSS.items[i].title + "</a></div>";

		//dataString += "<div class='itemDescription'>" + RSS.items[i].description + "</div>";

		dataString += "</div>";

    }

	document.getElementById('outputBlock').innerHTML = dataString;

	
 

function compFunc (a, b)

{

 	if (a.pubDate < b.pubDate)

  		return 1;

 	else if (a.pubDate > b.pubDate)

  		return -1;

 	else

  		return 0;

}
 

//SCROLL BAR CODE
 

var ie=document.all;

var nn6=document.getElementById&&!document.all;
 

var isdrag=false;

var x,y;

var dobj;

var scrollPercent;

var boxTop;

var maxHeight;

var toppoint;

var scrollBarBoxOffset = 74;
 

function init() {

	document.getElementById('scrollBarBox').style.top = "74px";

	document.getElementById('scrollBarBox').style.height = "216px";

	document.getElementById('scrollBar').style.height = "40px";

}
 

function movemouse(e) {

	if (isdrag) {

		//dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
 

		toppoint = (nn6) ? ty + e.clientY - y : ty + event.clientY - y;

		boxTop = parseInt(document.getElementById('scrollBarBox').style.top) - scrollBarBoxOffset;

		if (toppoint < boxTop) toppoint = boxTop;
 

		boxHeight = parseInt(document.getElementById('scrollBarBox').style.height);

		maxHeight = boxTop + boxHeight - parseInt(document.getElementById('scrollBar').style.height);

		if (toppoint > maxHeight) toppoint = maxHeight;
 

		dobj.style.top = toppoint + "px";

		

		scrollPercent = toppoint / maxHeight;

		document.getElementById('textWindow').style.top = parseInt(0 - (document.getElementById('textWindow').offsetHeight - parseInt(document.getElementById('scrollBarBox').style.height)) * scrollPercent );
 

		return false;

	}

}
 

function selectmouse(e) {

	var fobj = nn6 ? e.target : event.srcElement;

	var topelement = nn6 ? "HTML" : "BODY";

	while (fobj.tagName != topelement && fobj.className != "dragme") {

		fobj = nn6 ? fobj.parentNode : fobj.parentElement;

	}

	

	if (fobj.className == "dragme") {

		isdrag = true;

		dobj = fobj;

		//tx = parseInt(dobj.style.left + 0);

		ty = parseInt(dobj.style.top + 0);

		//x = nn6 ? e.clientX : event.clientX;

		y = nn6 ? e.clientY : event.clientY;

		document.onmousemove = movemouse;

		return false;

	}

}
 

document.onmousedown = selectmouse;

document.onmouseup = new Function("isdrag=false;");

Open in new window

Widget-Screenshot.png
0
Comment
Question by:kimberleyharris
  • 3
  • 3
6 Comments
 
LVL 7

Expert Comment

by:bluV11t
ID: 22797794
Try:
        for (var i=itemElement.length; i>0; i--) {
                Item = new RSS2Item(itemElements[i]);
                this.items.push(Item);
        }
0
 
LVL 1

Author Comment

by:kimberleyharris
ID: 22799189
Thank you bluV11t, but that does not seem to be working. I am adding the XML structure just to be sure I haven't made a mistake in the way I am coding to it. I have a feeling I need a function for the <pubDate> but I am not sure. I also am not sure how to approach it.
<?xml version="1.0" encoding="utf-8" ?>

<?xml-stylesheet type="text/xsl" href="rss.xsl" media="screen"?><rss version="2.0">

	<channel>

		<title>...</title>

		<link>https://...</link>

		<description>...</description>

		<item>
 

			<title>...</title>

			<link>https://...</link>

			<description><![CDATA[...]]></description>

			<pubDate>Wed, 05 Sep 2007 13:28:56 GMT</pubDate>

		</item>

		</channel>

</rss>

Open in new window

0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22804458
Maybe I wasn't beeing very clear... my suggestion is to change the function RSS2Channel to reverse the for-loop like this:

function RSS2Channel(rssxml) {
        this.items = new Array();
        var itemElements = rssxml.getElementsByTagName("item");
       
        for (var i=itemElement.length; i>0; i--) {
                Item = new RSS2Item(itemElements[i]);
                this.items.push(Item);
        }
}

0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 1

Author Comment

by:kimberleyharris
ID: 22806908
Yes, I understood. I did it, but it still did not work. Not sure why.
0
 
LVL 7

Accepted Solution

by:
bluV11t earned 500 total points
ID: 22806987
Sorry, my mistake :-) Try:

        for (var i=itemElements.length; i>0; i--) {
                Item = new RSS2Item(itemElements[i-1]);
                this.items.push(Item);
        }
0
 
LVL 1

Author Comment

by:kimberleyharris
ID: 22807023
Awesome! That is exactly what I needed! Thank you so much for your help!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now