Dynamic Drive- Animated Document Title

New Revised CSS Library Forums Web Tools

Animated Document Title

Author: Dynamic Drive

Note: Based on code from Status Bar Decrypter

Description: Possibly the net's first, this DHTML script brings to life once the dullest of the dull element on your page- the TITLE. The script automatically seeks out the <title> of your document, and animates it to view in IE 4+ and NS 6. All other browsers will simply see the text in its original static state.

Demo: Look at your browser's title bar above when you enter this page. Reload if you missed it.

Directions:

Simply copy the below into the <head> section of your page:

Select All
<script language="JavaScript1.2"> /* Animated Document title- By Dynamicdrive.com For full source, TOS, and 100s DTHML scripts Visit http://dynamicdrive.com */ if (document.all||document.getElementById){ var thetitle=document.title document.title='' } ////Animation code below ////based on script from http://wsabstract.com/script/script2/statusanimate.shtml var data="0123456789"; var done=1; function statusIn(text){ decrypt(text,2,1); } function statusOut(){ self.status=''; done=1; } //-------------------------\\ //decrypt(string, int, int)\\ //-------------------------\\ // //text(string): the text to be decrypted on //the status bar. // //max(int): the number of times a random string //is displayed before the next character is //'decrypted'. // //delay(int): the number of milliseconds between //each display of a random string // //Example: //decrypt('Enter my site.',10,10); // //text = 'Enter my site.' :: 'Enter my site.' is //eventually decrypted // //max = 10 :: a different random string is dis- //played 10 times before a new character is //decrypted function decrypt(text, max, delay){ if (done){ done = 0; decrypt_helper(text, max, delay, 0, max); } } function decrypt_helper(text, runs_left, delay, charvar, max){ if (!done){ runs_left = runs_left - 1; var status = text.substring(0,charvar); for(var current_char = charvar; current_char < text.length; current_char++){ status += data.charAt(Math.round(Math.random()*data.length)); } document.title = status; var rerun = "decrypt_helper('" + text + "'," + runs_left + "," + delay + "," + charvar + "," + max + ");" var new_char = charvar + 1; var next_char = "decrypt_helper('" + text + "'," + max + "," + delay + "," + new_char + "," + max + ");" if(runs_left > 0){ setTimeout(rerun, delay); } else{ if (charvar < text.length){ setTimeout(next_char, Math.round(delay*(charvar+3)/(charvar+1))); } else { done = 1; } } } } //if IE 4+ or NS 6+ if (document.all||document.getElementById) statusIn(thetitle) </script>

Obviously, your document should contain a valid title, defined using the <title> tag in the <head> section of the page, in order for this script to work.