RV's free DHTML and JavaScript text and graphic scripts

Phone me on: +44 (0) 555 123 4567
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+. (Much as I hate to do anything to assist Microsoft, if this effect is used on Internet Explorer in quirks mode, the effect is even more fun!)
05-May-2005: First release.
STEP 1: Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page: <script type="text/javascript"> // <![CDATA[ var bgcolour="#ffffff"; // background colour var hlcolour="#ddccff"; // highlight colour var speed=250; // speed colours change, 1 second = 1000 /**************************** * Phone-In Text Effect * (c) 2003-6 mf2fm web-design * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var p_txt; window.onload=function() { if (document.getElementById) { var phoni; var phone=document.getElementById("phonein"); p_txt=phone.firstChild.nodeValue; while (phone.childNodes.length) phone.removeChild(phone.childNodes[0]); for (var i=0; i<p_txt.length; i++) { phoni=document.createElement("div"); phoni.style.display="inline"; phoni.setAttribute("id", "phon"+i); phoni.appendChild(document.createTextNode(p_txt.charAt(i))); phone.appendChild(phoni); } phone_me((p_txt=p_txt.length)-1); }} function phone_me(p_cnt) { var p_tmp=document.getElementById("phon"+p_cnt); p_tmp.style.fontWeight="normal"; if (document.all) p_tmp.style.filter=''; p_tmp.style.backgroundColor=bgcolour; p_cnt=++p_cnt%p_txt; p_tmp=document.getElementById("phon"+p_cnt); if (p_tmp.firstChild.nodeValue!=" ") { p_tmp.style.fontWeight="bold"; if (document.all) p_tmp.style.filter="GLOW(strength=3, color=#"+bgcolour+")"; p_tmp.style.backgroundColor=hlcolour; } setTimeout("phone_me("+p_cnt+")", speed); } // ]]> </script> CLICK HERE to select the above script ready to paste it into your clipboard
STEP 2: Change the colours at the start of the script you just copied to reflect your web-page background colour and the highlight colour you wish to use. Only use the format '#ffffff' and not 'white'.
STEP 3: Place a <span> element with 'id="phonein"' on your web-page containing the number or text you wish to be animated. For example: Don't include anything other than text between the <span> tags.
THAT'S IT When your page loads, the text you placed between between the <span> tags should be animated, like the phone-number at the top of this page (which isn't really my number incidentally).

Copyright notice: All scripts are © copyright mf2fm.com. You can use them wherever and whenever you wish, however the copyright notice at the start of the script should remain intact and a link back to this page would be appreciated. The address for this page is: http://www.mf2fm.com/rv/dhtmlphonein.php.

This page has been viewed 61 times. It was last viewed on Fri 22 Nov, 2024 at 21:22