Dynamic Drive DHTML Scripts- XML Ticker

IE5+

XML Ticker

Description: This is an XML based JavaScript Ticker that can tick any number of messages. One of the beneifts of using XML is seperation of content from presentation- the contents for this ticker resides in a seperate file. This script currently works only in IE, degrading well with the rest.

Demo:

Directions

Step 1: Insert the below into the <BODY> section of your page, where you wish the ticker to appear:

Select All
<script language="JavaScript1.2"> //XML Ticker script- By Premshree Pillai (premshree@hotmail.com) //http://www.qiksearch.com/ //Visit http://www.dynamicdrive.com for this script var browserok=window.ActiveXObject if (browserok) 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; } } if (browserok){ 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(); } if (browserok) setTicker(); </script>

Step 2: Download the following xml file, and upload to your webpage directory. It contains the ticker style and contents:

ticker_items.xml (right click, and select "Save as")

You're essentially done!

Understanding the structure of ticker_items.xml

All changes to the scroller appearance and contents are made inside the external .xml file. To edit this file, use any text editor to open it. Here is an explanation of the variables involved:

TICKER

tickerstyle

� pause = "true" / "false" :: "true" for pause onMouseOver

� timeout = any integer :: The delay in seconds between different messages.

� border = any integer :: Border width of Ticker

� bordercolor = #HexColor :: The border color of Ticker

� background = #HexColor :: Background color of Ticker

� width = any integer :: Ticker width

� height = any 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 = 'any integer'pt :: Ticker link size

mouseover

� 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 = 'any integer'pt :: Ticker link size

tickeritem

� URL = A valid URL :: Ticker link URL

� target = "_blank" / "_top" / "_self" / 'any other valid target name' :: Ticker link target

Have fun!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post