Jump to content

Javascript News Ticker Using Xml Data


kwilliams
 Share

Recommended Posts

I found an online tutorial on using JavaScript to load a news ticker from XML data. I now want to filter those results by displaying only "message" nodes that contain an "@status" attribute value of "active". I've made a few attempts at it without success. Below is the code that I have, including the solution I tried without success under "filter attempt". If anyone could help me to solve this issue, I'd really appreciate it. Thanks.xmlticker.xml:

<?xml version="1.0" encoding="iso-8859-1"?><xmlticker>	<pause>1000</pause>	<message url="url1.html" status="active" description="Description #1">Message #1</message>	<message url="url2.html" status="inactive" description="Description #2">Message #2</message>	<message url="url3.html" status="active" description="Description #3">Message #3</message>	<message url="url4.html" status="active" description="Description #4">Message #4</message></xmlticker>

ticker.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><script language="javascript">/*DOM XML ticker- © Dynamic Drive (www.dynamicdrive.com)For full source code, 100's more DHTML scripts, and Terms Of Use, visit http://www.dynamicdrive.comCredit MUST stay intact*///Declare variablesvar tickercontainer = '<div id="container" style="background-color:#FFFFE1;width:150px;height:120px;font:normal 13px Verdana;"></div>';//container for ticker. Modify its STYLE attribute to customize style.var xmlsource = "xmlticker.xml";//specifies path to xml filevar notWhitespace = /\S/; //regular expression used to match any non-whitespace charactervar msglength = "";var currentmsg = 1;var themessage = "";//load xml fileif (window.ActiveXObject) {//then	var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");}else if (document.implementation && document.implementation.createDocument) {//then	var xmlDoc= document.implementation.createDocument("","doc",null);}//end if	if (typeof xmlDoc != "undefined") {//then	//var nodelist As XmlNodeList;	document.write(tickercontainer);	xmlDoc.load(xmlsource);}//end iffunction init_ticker() {//begin function	//Cache "messages" element of xml file	tickerobj = xmlDoc.getElementsByTagName("xmlticker")[0];//ORIGINAL - WORKING		//REMOVE white spaces in XML file. Intended mainly for NS6/Mozilla	for (i=0;i<tickerobj.childNodes.length;i++) {//begin loop		if ((tickerobj.childNodes[i].nodeType == 3) && (!notWhitespace.test(tickerobj.childNodes[i].nodeValue))) {//then			tickerobj.removeChild(tickerobj.childNodes[i]);			i--;		}//end if	}//end loop		document.getElementById("container").innerHTML = "Information follows...";//tickerobj.childNodes[1].firstChild.nodeValue;//this is the container's first value	msglength = tickerobj.childNodes.length;//amount of message nodes	setInterval("rotatemsg()",tickerobj.childNodes[0].firstChild.nodeValue);//set ticker to "pause" node value}//end functionfunction rotatemsg() {//begin function	var msgsobj = tickerobj.childNodes[currentmsg];//starting with message 1 (tickerobj.childNodes[1])	if (msgsobj.getAttribute("url") != null) {//then		themessage = '<strong><a href="' + msgsobj.getAttribute("url") + '"';		//Set target		if (msgsobj.getAttribute("target") != null); {//then			themessage += ' target="' + msgsobj.getAttribute("target") + '"';			themessage += '>';		}//end if				themessage += msgsobj.firstChild.nodeValue;//sets title		themessage += '</a>: </strong>';		themessage += msgsobj.getAttribute("description");		themessage += ' <a href="' + msgsobj.getAttribute("url") + '">Learn more >></a>';		//Rotate msg and display it in DIV:		document.getElementById("container").innerHTML = themessage;//applies entire message to div "container"		currentmsg = (currentmsg < msglength - 1)? currentmsg + 1 : 1; //(1 < 4 - 1)? 1 + 1 : 1		themessage = '';	}//end if}//end functionfunction fetchxml() {//begin function	if (xmlDoc.readyState == 4) {//then		init_ticker();	}	else {		setTimeout("fetchxml()",10);	}//end if}//end function</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test File</title></head><body><script language="javascript">if (window.ActiveXObject) {//then	fetchxml();}else if (typeof xmlDoc != "undefined") {//then	xmlDoc.onload = init_ticker;}//end if</script></body></html>

filter attempt:

function rotatemsg() {//begin function	var msgsobj = tickerobj.childNodes[currentmsg];//starting with message 1 (tickerobj.childNodes[1])	if (msgsobj.getAttribute("url") != null && msgsobj.getAttribute("status") != "inactive") {//then <<<<<------*****THIS IS WHAT I TRIED*****		themessage = '<strong><a href="' + msgsobj.getAttribute("url") + '"';		//Set target		if (msgsobj.getAttribute("target") != null); {//then			themessage += ' target="' + msgsobj.getAttribute("target") + '"';			themessage += '>';		}//end if				themessage += msgsobj.firstChild.nodeValue;//sets title		themessage += '</a>: </strong>';		themessage += msgsobj.getAttribute("description");		themessage += ' <a href="' + msgsobj.getAttribute("url") + '">Learn more >></a>';		//Rotate msg and display it in DIV:		document.getElementById("container").innerHTML = themessage;//applies entire message to div "container"		currentmsg = (currentmsg < msglength - 1)? currentmsg + 1 : 1; //(1 < 4 - 1)? 1 + 1 : 1		themessage = '';	}//end if}//end function

Link to comment
Share on other sites

Ok, here's an update:I received a suggestion of moving the following line out of the "if" statement,

//Rotate msg and display it in DIV:		document.getElementById("container").innerHTML = themessage;//applies entire message to div "container"		themessage = '';	}//end if	currentmsg = (currentmsg < msglength - 1)? currentmsg + 1 : 1; //(1 < 4 - 1)? 1 + 1 : 1;

and it works! Yeah.But now I have another issue on this line:

setInterval("rotatemsg()",tickerobj.childNodes[0].firstChild.nodeValue);//set ticker to "pause" node value

...within the init_ticker() function. Now the pause still happens for the nodes not displayed. So although it does display only the nodes that have a status="active" value, the "1000" pause value still happens for those blank nodes. If anyone has any suggestions on how I can tweak my code to fix that as well, that would be great. Thanks.

Link to comment
Share on other sites

You probably need to keep incrementing the currentmsg counter until you get to a message with the right status. You're incrementing the counter but not checking if the next message is going to be shown.
Could you let me know how I can correct that? I moved the currentmsg variable just above the "setInterval", but that made no difference. Thanks for any help.
Link to comment
Share on other sites

You need to test the node to make sure it's going to be shown. You can use a while loop for that. e.g.:

currentmsg = (currentmsg < msglength - 1)? currentmsg + 1 : 1;msgsobj = tickerobj.childNodes[currentmsg];while (msgsobj.getAttribute("url") == null || msgsobj.getAttribute("status") == "inactive"){  currentmsg = (currentmsg < msglength - 1)? currentmsg + 1 : 1;  msgsobj = tickerobj.childNodes[currentmsg];}

That loop will end when currentmsg points to a node that is actually going to be shown.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...