Read and Display Server-Side XML with JavaScript Article

    Premshree Pillai
    Share
    Project: An XML-based JavaScript Ticker

    There are many more properties and methods available, and, using these, you can create many client side applications. The main advantage of using XML with JavaScript is that editing data becomes very easy. As XML is structured, it makes the management of content very easy. One example is a folder-tree menu. Another one is a JavaScript Ticker. You can find the full code an an example of this XML-based JavaScript Ticker at DynamicDrive.

    We will create a XML based JavaScript Ticker that can display any number of messages. The ticker reads its contents (i.e. the ticker style), the text to be displayed, and the link for that particular message from an XML file. We’ll call the XML file ticker_items.xml.

    The structure of the XML document is as follows:

    <?xml version="1.0"?>  
    <ticker>  
     <tickerstyle  
       pause       = "true" / "false"       "true" for pause onMouseOver  
       timeout     = positive integer       The delay in seconds b/w messages  
       border      = positive integer       The border width of Ticker  
       bordercolor = #HexColor              The border color of Ticker  
       background  = #HexColor              The background color of Ticker  
       width       = positive integer       Ticker width  
       height      = positive integer       Ticker height  
     />  
     <tickerlinkstyle>  
       <mouseout  
         font       = "verdana,arial,helvetica..."     Ticker link font  
         color      = #HexColor                        Ticker link color  
         decoration = "none" / "underline" /  
                      "underline + overline"           Ticker link style  
         weight     = "normal" / "bold"                Ticker link weight  
         size       = <positive integer>pt             Ticker link size  
       />  
       <mouseover  
         font       = "verdana,arial,hevetica..."      Ticker link font  
         color      = #HexColor                        Ticker link color  
         decoration = "none" / "underline" /  
                      "underline + overline"           Ticker link style  
         weight     = "normal" / "bold"                Ticker link weight  
         size       = <positive integer>pt             Ticker link size  
       />  
     </tickerlinkstyle>  
     <tickeritem  
       URL       = A valid URL                         Ticker link URL  
       target    = "_blank" / "_top" / "_self" /  
                   <any other valid target name>       Ticker link target  
     > Ticker item 1 text </tickeritem>  
     <tickeritem ...> Ticker item 2 text </tickeritem>  
     ...  
    </ticker>
    XML Ticker Script
    <script language="JavaScript1.2">  
    // XML Ticker JavaScript  
    // (c) 2002 Premshree Pillai  
    // http://www.qiksearch.com  
    // Use freely as long as all messages are as it is  
    // Location of script:  
    http://www.qiksearch.com/javascripts/xml/ticker.htm  
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
    function loadXML(xmlFile)  
    {  
    xmlDoc.async="false";  
    xmlDoc.onreadystatechange=verify;  
    xmlDoc.load(xmlFile);  
    ticker=xmlDoc.documentElement;  
    }  
    function verify()  
    {  
    if (xmlDoc.readyState != 4)  
    {  
     return false;  
    }  
    }  
    loadXML('ticker_items.xml');  
    document.write('<style type="text/css">');  
    document.write('.ticker_style{font-family:' +  
    ticker.childNodes(1).childNodes(0).getAttribute('font') + ';  
    font-size:' +  
    ticker.childNodes(1).childNodes(0).getAttribute('size')  
    + '; color:' +  
    ticker.childNodes(1).childNodes(0).getAttribute('color') +  
    '; font-weight:' +  
    ticker.childNodes(1).childNodes(0).getAttribute('weight') +  
    '; text-decoration:' +  
    ticker.childNodes(1).childNodes(0).getAttribute('decoration')  
    + '}');document.write('.ticker_style:hover{font-family:' +  
    ticker.childNodes(1).childNodes(1).getAttribute('font') +  
    '; font-size:' +  
    ticker.childNodes(1).childNodes(1).getAttribute('size')  
    + '; color:' +  
    ticker.childNodes(1).childNodes(1).getAttribute('color') +  
    '; font-weight:' +  
    ticker.childNodes(1).childNodes(1).getAttribute('weight') +  
    '; text-decoration:' +  
    ticker.childNodes(1).childNodes(1).getAttribute  
    ('decoration') + '}<br>');  
    document.write('</style>');  
    document.write('<table style="border:' +  
    ticker.childNodes(0).getAttribute('border')  
    + ' solid ' + ticker.childNodes(0).getAttribute('bordercolor') +  
    '; background:' + ticker.childNodes(0).getAttribute('background') +  
    '; width:' + ticker.childNodes(0).getAttribute('width') + '; height:'  
    + ticker.childNodes(0).getAttribute('height') + '">  
    <tr><td><div id="ticker_space"></div>  
    </td></tr></table>');  
    var item_count=2;  
    var timeOutVal=(ticker.childNodes(0).getAttribute('timeout'))*1000;  
    var original_timeOutVal=timeOutVal;  
    var isPauseContent;  
    if(ticker.childNodes(0).getAttribute('pause')=="true")  
    {  
    isPauseContent=' onmouseover="setDelay();" onmouseout="reset();"';  
    }  
    else  
    {  
    isPauseContent='';  
    }  
    function setTicker()  
    {  
    document.all.ticker_space.innerHTML='<center><a href="' +  
    ticker.childNodes(item_count).getAttribute('URL') + '" target="'  
    + ticker.childNodes(item_count).getAttribute('target') +  
    '" class="ticker_style"' + isPauseContent + '>' +    
    ticker.childNodes(item_count).firstChild.text + '</a></center>';  
    if(item_count==ticker.childNodes.length-1)  
    {  
     item_count=2;  
    }  
    else  
    {  
     item_count++;  
    }  
    setTimeout("setTicker()",timeOutVal);  
    }  
    function setDelay()  
    {  
    timeOutVal=10000000000000;  
    item_count--;  
    }  
    function reset()  
    {  
    timeOutVal=original_timeOutVal;  
    setTicker();  
    }  
    setTicker();  
    </script>

    As you can see in the source code, the ticker reads:

  • all the messages to be displayed,
  • the links for each message,
  • the target for each URL,
  • the ticker static style,
  • the roll-over style,
  • border width, color and background,
  • the delay between messages, and more, from the XML file.
  • So if you want to change any parameter of the Ticker, all you have to do is make necessary changes in the XML file.

    The ticker shown here is a basic ticker that rotates messages at an interval that is specified in the XML file. There are many effects you could add to the ticker like ‘Fading message’ or ‘Teletypewriter’. You could also add features to change the ticker speed, or to list all messages in an instant!

    Go to page: 1 | 2