Web Developer - Javascript - Scrolling Highlighter

Scrolling Highlighter

Languages

Assistance

The Developer

Code

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Scrolling Highlighter</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <script language="javascript" type="text/javascript"> // // Scrolling Highlighter // Some Rights Reserved // http://webdeveloper.50webs.com // var Tick = 1 // 1000 = 1 Second (Should range from apx. 1 - 200) var j = 0 // Start at character number? window.onload = doOnload // Comment to stop autoload var sPlainText var sOffID function doOnload() { idHighlight.innerHTML = replaceChars(idHighlight.innerText,"","") sPlainText = idHighlight.innerText getString()} function getString() { sDynaText = "" // Pretext (optional) for (i=0;i<sPlainText.length;i++){ sDynaText += "<SPAN ID=Char" + i + " CLASS=Normal>" + sPlainText.substring(i,i+1) + "</SPAN>"} idHighlight.innerHTML = sDynaText window.setTimeout("doDynaText()",Tick)} function doDynaText() { if (null != sOffID) { document.all(sOnID).className = "Highlight"} sOnID = "Char" + (j) document.all(sOnID).className = "Highlight" // Scrolled Charactor Style sOffID = sOnID j++ if (j < sPlainText.length ) { window.setTimeout("doDynaText()",Tick)} else { if (null != sOffID) { //window.setTimeout("document.all(sOnID).className = 'Normal'",Tick) // Reverses 1 at End }}} function replaceChars(sString,sOld,sNew) { for (i = 0; i < sString.length; i++) { if (sString.substring(i, i + sOld.length) == sOld) { sString = sString.substring(0, i) + sNew + sString.substring(i + sOld.length, sString.length)}} return sString} function degrade() { if (navigator.appName!="Microsoft Internet Explorer") { document.write("<table cellpadding=0 cellspacing=0 border=0><tr><td class='Highlight'>"); }} function closeDegrade() { if (navigator.appName!="Microsoft Internet Explorer") { document.write("</td></tr></table>"); }} </script> <!=== CSS> <style type="text/css"> .Normal { } .Highlight { background-color:#FFFF00; } .Text { color:#000000;font-size:10px;font-weight:regular; font-family: Verdana,Arial,Helvetica,sans-serif; } </style> <!=== text> <script language="javascript">degrade();</script> <span id="idHighlight" class="Text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</span> <script language="javascript">closeDegrade();</script> </body> </html>

Additional Resources

PayPal Donation Page

This work by http://webdeveloper.50webs.com is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.