Saint Michael's Dhtml Tips And Tricks Issue #2 well i thought i catch up in my issues so heres some more

[Saint_Michael 3]

Todays is were are going to do some text effects that should be interesting for some people, the first one we are going to talk about is the matrix scrolling text effect, if you seen the moives and about 99% of you have then you know about hte computer screens now you can do it. this is done in a 2 step process. STEP 1: Insert this script in the head tags

<style type="text/css"> .matrix { font-family:Lucida Console, Courier, Monotype; font-size:10pt; text-align:center; width:10px; padding:0px; margin:0px;} </style> <script type="text/javascript" language="JavaScript"> <!-- var rows=11; // must be an odd number var speed=50; // lower is faster var reveal=2; // between 0 and 2 only. The higher, the faster the word appears var effectalign="default" //enter "center" to center it. /*********************************************** * The Matrix Text Effect- by Richard Womersley (http://forums.xisto.com/no_longer_exists/) * This notice must stay intact for use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var w3c=document.getElementById && !window.opera;; var ie45=document.all && !window.opera; var ma_tab, matemp, ma_bod, ma_row, x, y, columns, ma_txt, ma_cho; var m_coch=new Array(); var m_copo=new Array(); window.onload=function() { if (!w3c && !ie45) return   var matrix=(w3c)?document.getElementById("matrix"):document.all["matrix"];   ma_txt=(w3c)?matrix.firstChild.nodeValue:matrix.innerHTML;   ma_txt=" "+ma_txt+" ";   columns=ma_txt.length;   if (w3c) {     while (matrix.childNodes.length) matrix.removeChild(matrix.childNodes[0]);     ma_tab=document.createElement("table");     ma_tab.setAttribute("border", 0);     ma_tab.setAttribute("align", effectalign);     ma_tab.style.backgroundColor="#000000";     ma_bod=document.createElement("tbody");     for (x=0; x<rows; x++) {       ma_row=document.createElement("tr");       for (y=0; y<columns; y++) {         matemp=document.createElement("td");         matemp.setAttribute("id", "Mx"+x+"y"+y);         matemp.className="matrix";         matemp.appendChild(document.createTextNode(String.fromCharCode(160)));         ma_row.appendChild(matemp);       }       ma_bod.appendChild(ma_row);     }     ma_tab.appendChild(ma_bod);     matrix.appendChild(ma_tab);   } else {     ma_tab='<ta'+'ble align="'+effectalign+'" border="0" style="background-color:#000000">';     for (var x=0; x<rows; x++) {       ma_tab+='<t'+'r>';       for (var y=0; y<columns; y++) {         ma_tab+='<t'+'d class="matrix" id="Mx'+x+'y'+y+'"> </'+'td>';       }       ma_tab+='</'+'tr>';     }     ma_tab+='</'+'table>';     matrix.innerHTML=ma_tab;   }   ma_cho=ma_txt;   for (x=0; x<columns; x++) {     ma_cho+=String.fromCharCode(32+Math.floor(Math.random()*94));     m_copo[x]=0;   }   ma_bod=setInterval("mytricks()", speed); } function mytricks() {   x=0;   for (y=0; y<columns; y++) {     x=x+(m_copo[y]==100);     ma_row=m_copo[y]%100;     if (ma_row && m_copo[y]<100) {       if (ma_row<rows+1) {         if (w3c) {           matemp=document.getElementById("Mx"+(ma_row-1)+"y"+y);           matemp.firstChild.nodeValue=m_coch[y];         }         else {           matemp=document.all["Mx"+(ma_row-1)+"y"+y];           matemp.innerHTML=m_coch[y];         }         matemp.style.color="#33ff66";         matemp.style.fontWeight="bold";       }       if (ma_row>1 && ma_row<rows+2) {         matemp=(w3c)?document.getElementById("Mx"+(ma_row-2)+"y"+y):document.all["Mx"+(ma_row-2)+"y"+y];         matemp.style.fontWeight="normal";         matemp.style.color="#00ff00";       }       if (ma_row>2) {           matemp=(w3c)?document.getElementById("Mx"+(ma_row-3)+"y"+y):document.all["Mx"+(ma_row-3)+"y"+y];         matemp.style.color="#009900";       }       if (ma_row<Math.floor(rows/2)+1) m_copo[y]++;       else if (ma_row==Math.floor(rows/2)+1 && m_coch[y]==ma_txt.charAt(y)) zoomer(y);       else if (ma_row<rows+2) m_copo[y]++;       else if (m_copo[y]<100) m_copo[y]=0;     }     else if (Math.random()>0.9 && m_copo[y]<100) {       m_coch[y]=ma_cho.charAt(Math.floor(Math.random()*ma_cho.length));       m_copo[y]++;     }   }   if (x==columns) clearInterval(ma_bod); } function zoomer(ycol) {   var mtmp, mtem, ytmp;   if (m_copo[ycol]==Math.floor(rows/2)+1) {     for (ytmp=0; ytmp<rows; ytmp++) {       if (w3c) {         mtmp=document.getElementById("Mx"+ytmp+"y"+ycol);         mtmp.firstChild.nodeValue=m_coch[ycol];       }       else {         mtmp=document.all["Mx"+ytmp+"y"+ycol];         mtmp.innerHTML=m_coch[ycol];       }       mtmp.style.color="#33ff66";       mtmp.style.fontWeight="bold";     }     if (Math.random()<reveal) {       mtmp=ma_cho.indexOf(ma_txt.charAt(ycol));       ma_cho=ma_cho.substring(0, mtmp)+ma_cho.substring(mtmp+1, ma_cho.length);     }     if (Math.random()<reveal-1) ma_cho=ma_cho.substring(0, ma_cho.length-1);     m_copo[ycol]+=199;     setTimeout("zoomer("+ycol+")", speed);   }   else if (m_copo[ycol]>200) {     if (w3c) {       mtmp=document.getElementById("Mx"+(m_copo[ycol]-201)+"y"+ycol);       mtem=document.getElementById("Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol);     }     else {       mtmp=document.all["Mx"+(m_copo[ycol]-201)+"y"+ycol];       mtem=document.all["Mx"+(200+rows-m_copo[ycol]--)+"y"+ycol];     }     mtmp.style.fontWeight="normal";     mtem.style.fontWeight="normal";     setTimeout("zoomer("+ycol+")", speed);   }   else if (m_copo[ycol]==200) m_copo[ycol]=100+Math.floor(rows/2);   if (m_copo[ycol]>100 && m_copo[ycol]<200) {     if (w3c) {       mtmp=document.getElementById("Mx"+(m_copo[ycol]-101)+"y"+ycol);       mtmp.firstChild.nodeValue=String.fromCharCode(160);       mtem=document.getElementById("Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol);       mtem.firstChild.nodeValue=String.fromCharCode(160);     }     else {       mtmp=document.all["Mx"+(m_copo[ycol]-101)+"y"+ycol];       mtmp.innerHTML=String.fromCharCode(160);       mtem=document.all["Mx"+(100+rows-m_copo[ycol]--)+"y"+ycol];       mtem.innerHTML=String.fromCharCode(160);     }     setTimeout("zoomer("+ycol+")", speed);   } } // --> </script>

STEP 2: instert this tag where ever you want for that cool effect

<div id="matrix">Dynamic Drive</div>

The next dhtml script contains a little css but thats ok, this script lets you put your text in a vertical position and why would someone do this who knows but its still cool effect. This is also a 2 step process STEP 1: insert the following css script in your header or externel link

<style type="text/css"> .verticaltext{ font: bold 13px Arial; position: absolute; right: 3px; top: 20px; width: 15px; writing-mode: tb-rl; } </style>

STEP 2 insert this script in the body section of your website

<script type="text/javascript"> /*********************************************** * Vertical Text script- ďż˝ Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) * Visit http://www.dynamicdrive.com/ for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ //Enter desired vertical text: var myverticaltext='<div class="verticaltext">This page copyright ďż˝ 1998-2004 <a href="http://www.dynamicdrive.com/ Drive.</a></div>' var bodycache=document.body if (bodycache && bodycache.currentStyle && bodycache.currentStyle.writingMode) document.write(myverticaltext) </script>

are next text effect script is kind of useful in some aspect its called glowing text effect this to is a 2 step process STEP 1 insert this css script into head tag

<style> <!-- #glowtext{ filter:glow(color=FFFF00,strength=3); width:100%; } --> </style> <script language="JavaScript1.2"> /* Glowing Text Script- ďż˝ Dynamic Drive (http://www.dynamicdrive.com/) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ function glowit(which){ if (document.all.glowtext[which].filters[0].strength==3) document.all.glowtext[which].filters[0].strength=2 else document.all.glowtext[which].filters[0].strength=3 } function glowit2(which){ if (document.all.glowtext.filters[0].strength==3) document.all.glowtext.filters[0].strength=2 else document.all.glowtext.filters[0].strength=3 } function startglowing(){ if (document.all.glowtext&&glowtext.length){ for (i=0;i<glowtext.length;i++) eval('setInterval("glowit('+i+')",150)') } else if (glowtext) setInterval("glowit2(0)",150) } if (document.all) window.onload=startglowing </script>

STEP 2: insert the following span id tag to get it going

<span id="glowtext">This is a glowing text</span>

and the final text effect we are going to show is another neon one which is very customizable so here is the script

<h2><script language="JavaScript1.2"> //Neon Lights Text II by G.P.F. (gpf@beta-cc.de) //visit http://www.beta-cc.de/ //Visit http://www.dynamicdrive.com/ for this script var message="Thank you for visiting Dynamic Drive!" var neonbasecolor="gray" var neontextcolor="yellow" var neontextcolor2="#FFFFA8" var flashspeed=100      // speed of flashing in milliseconds var flashingletters=3      // number of letters flashing in neontextcolor var flashingletters2=1      // number of letters flashing in neontextcolor2 (0 to disable) var flashpause=0      // the pause between flash-cycles in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script></h2>

the next script we are going to talk about is a progress bar but due to the fact you need a external js fil i will show you the link that will tell you what to do click here for those who like to use iframes for small sites this script is a floating iframe and also you have the option of closing it like thos adds with the close here tag line STEP 1: insert script into the body

<script type="text/javascript"> /*********************************************** * Floating Iframe script- ďż˝ Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) * Visit http://www.dynamicdrive.com/ for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ //Specify iframe to display. Change src and other attributes except "position" and "left/top": var iframetag='<iframe id="masterdiv" src="whatever.htm" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -500px; top: -500px;"></iframe>' //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")): var masterdivleft="10px" //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")): var masterdivtop="bottom" var ie=(document.all || window.opera) && document.getElementById var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body if (ie) document.write(iframetag) function positionit(){ masterdivobj=document.getElementById("masterdiv") var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20 window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight var dsocleft=ie? iebody.scrollLeft : pageXOffset var masterdivwidth=masterdivobj.width masterdivheight=masterdivobj.height masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft setInterval("repositionit()", 100) } function repositionit(){ if (ie){ dsoctop=ie? iebody.scrollTop : pageYOffset masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop } } if (window.attachEvent) window.attachEvent("onload", positionit) </script>

and to close the floating iframe you use the following script

<script> function closeiframe(){ parent.document.getElementById("masterdiv").style.display="none" } </script> <a href="javascript:closeiframe()">Close iframe</a>

and to end off our issue for today tabs, alot of sites are using the tab feature which actually help you make your site more presentable and their are so many ways to do i will just post the link to finish it up for the day PEACE!!!!! XP Click here for tab info