|
|
|
|
|
Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact |
||
|
Cursor Trailer Text Script by Peter Gehrig from Dynamic Drive >>> This is another text cursor trailer script. This demo comes as a result of a query by a Homestead member who wanted this on her page. This one needs a little massaging to make it work with SiteBuilder. It requires a style sheet in the <head> section and a body onLoad event handler attached to the body tag, both of which we do not have direct access to with SiteBuilder if you're using the offline one without ActiveX (as I am.) So the script contains a workaround and uses two Insert HTML elements. If you have access to the <HEAD> section with your version of SiteBuilder, you can disregard these instructions and follow those at Dynamic Drive. Tip: Script works in Internet Explorer and Opera v.7+ but not in Firefox. |
1) Using an Insert HTML element, copy-and-paste the following, make your change to the message (in red text). You should be able to change "font-size," "font-family," "font-weight," and "color." I changed the message and color only for this demo. Resize the element box as tiny as you can. Place the element in the top left corner of your page. <style>.spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:black; } </style> <script> /* Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/) Permission given to Dynamicdrive.com to feature script in it's archive. For full source code, installation instructions, and 1000's more DHTML scripts, visit http://dynamicdrive.com */ var x,y var step=20 var flag=0 // Your snappy message. Important: the space at the end of the sentence!!! var message="DYNAMIC DRIVE! " message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y
for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } }
else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y
for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } </script> 2) Copy-and-paste this into another Insert HTML element and place anywhere on the page. This is where the we'll use the workaround for the Body onLoad event handler from Stan Bisson. I placed my element in the top left corner underneath the first element. <script> <!-- Beginning of JavaScript - for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; // - End of JavaScript - --> </script> <img src="/tp.gif" width="1px" height="1px" onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
|
|
| Formerly hosted at www.geocities.com/ramblingtutor/ |
Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact Webpage graphics by Arride Graphics
|
|
