Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old June 22nd, 2009, 05:08 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Question JavaScript News Ticker Using XML Data

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
  #2 (permalink)  
Old June 24th, 2009, 05:33 PM
Banned
Points: 1,561, Level: 16
Points: 1,561, Level: 16 Points: 1,561, Level: 16 Points: 1,561, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2005
Location: , , .
Posts: 317
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.


Similar Threads
Thread Thread Starter Forum Replies Last Post
using javascript ticker in asp.net c# vivek_inos ASP.NET 1.0 and 1.1 Basics 1 June 5th, 2006 12:07 PM
News Ticker dangerduck BOOK: Professional Ajax ISBN: 978-0-471-77778-6 8 April 21st, 2006 07:09 AM
news ticker functionality badgolfer Classic ASP Basics 1 October 15th, 2004 12:37 AM
news ticker badgolfer ASP.NET 1.0 and 1.1 Basics 0 October 13th, 2004 03:34 AM
problem with News Ticker Application benito BOOK: ASP.NET Website Programming Problem-Design-Solution 2 September 1st, 2004 03:22 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.