JavaScript News Ticker Using XML Data

kwilliams · #1 (**permalink**) June 22nd, 2009, 06:08 PM

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:

Code:

<?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:

Code:

<!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.com
Credit MUST stay intact
*/

//Declare variables
var 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 file
var notWhitespace = /\S/; //regular expression used to match any non-whitespace character
var msglength = "";
var currentmsg = 1;
var themessage = "";

//load xml file
if (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 if

function 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 function

function 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 function

function 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:

Code:

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

kwilliams · #2 (**permalink**) June 24th, 2009, 06:33 PM

Ok, here's an update:

I received a suggestion of moving the following line out of the "if" statement,

Code:

//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:

Code:

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.

Need to download code?

Navigation