Computer Science Canada

[Tutorial][JavaScript] Flying Text

Author:  Asok [ Sat Mar 08, 2003 10:16 am ]
Post subject:  [Tutorial][JavaScript] Flying Text

Simply copy and paste the code into a blank html or into your own webpage so you can see the effect. I would show you an example but it wont let me for some reason I guess either dan or tony can copy this code to a url then link it.

code:
<html>
<body>
<h2><span id="fly"></span></h2> //replace the h2 tags if you want to edit the font with basic html font tags
<script>
window.onerror=new Function("return true")


//Configure message to display. Use "^" for linebreak
message = "This is the new text ^ this is new text on line 2" // ^ = taking a new line, equivalent to <br>
distance = 50 // pixel(s), changing this variable higher will make it come from further on the page.
speed = 100 // milliseconds

if (!document.all)
document.write('<h2>'+message+'</h2>')

</script>

<script language="JavaScript1.2">

txt="";
num=0;num4=0;
flyofle="";
flyofwi="";flyofto=""
function stfly(){for(i=0;i != message.length;i++){
// This if statement checks for a ^ in your message variable so it can put text on a seperate line
if(message.charAt(i) != "^"){txt=txt+"<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>"};
        else{txt=txt+"<br>"}};fly.innerHTML=txt;txt="";flyofle=fly.offsetLeft;flyofwi=fly.offsetWidth;flyofto=fly.offsetTop;fly2b()}
function fly2b(){
   if(num4 != message.length){
      if(message.charAt(num4) != "^"){
eval("n"+num4+".style.left=flyofle-n"+num4+".offsetLeft+flyofwi/2");
eval("n"+num4+".style.top=flyofto-n"+num4+".offsetTop+distance");
eval("fly3('n"+num4+"',eval(n"+num4+".style.left.substring(0,n"+num4+".style.left.length-2)),(eval(n"+num4+".style.left.substring(0,n"+num4+".style.left.length-2))/5),eval(n"+num4+".style.top.substring(0,n"+num4+".style.top.length-2)),(eval(n"+num4+".style.top.substring(0,n"+num4+".style.top.length-2))/5))")};num4++;setTimeout("fly2b()",speed)}}
function fly3(target,lef2,num2,top2,num3){if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1)){if(eval("'"+lef2+"'").charAt(0) != '-'){lef2=lef2-num2};else{lef2=lef2+(-num2)};
        if(Math.floor(lef2) != -1){eval(target+".style.visibility='visible';"+target+".style.left=Math.floor(lef2)")};
                else{eval(target+".style.visibility='visible';"+target+".style.left=Math.floor(lef2+1)")};
        if(eval("'"+lef2+"'").charAt(0) != '-'){top2=top2-num3};
                else{top2=top2+(-num3)};if(Math.floor(top2) != -1){eval(target+".style.top=Math.floor(top2)")};
                else{eval(target+".style.top=Math.floor(top2+1)")};
        setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)}};

stfly()

</script>
</body>
</html>


Hope you enjoy it Very Happy

Author:  Tony [ Sat Mar 08, 2003 1:01 pm ]
Post subject: 

the code could use a better spacing... kinda hard to read Confused

but the result is cool Very Happy

Author:  Asok [ Sat Mar 08, 2003 1:19 pm ]
Post subject: 

I had good spacing while editing it in notepad, but when copying it over it gets all messed up. I think just because of different font and different editable size.

Author:  Delta [ Tue Mar 25, 2003 2:03 pm ]
Post subject:  Cool!

It works just fine for me, looks really cool! Very Happy

Author:  JSBN [ Sun May 25, 2003 4:05 pm ]
Post subject: 

*bump*

Author:  rizzix [ Tue May 27, 2003 5:50 pm ]
Post subject: 

eh guys!

thats a JavaScript example!!!! not Java

there is a difference.

JavaScript was created by Netscape, using bits and pieces of the Java programming language syntax (it doesn't follow the Java rules at all).

Java on the other hand is defined and created by Sun Microsystems.
Engineered by a couple of genius scientists! Cool uh! Hence it's one of the best designed language available around the world today.

so i suppose u might wanna change the subtitle of this forum?
or whatever...

Author:  Asok [ Tue May 27, 2003 6:20 pm ]
Post subject: 

I didn't move this thread here so don't complain to me. Confused

Author:  Dan [ Wed May 28, 2003 6:37 pm ]
Post subject: 

opps my bad, i did not read it when i moved it Embarassed

Author:  Homer_simpson [ Wed May 28, 2003 6:39 pm ]
Post subject: 

looks very nice...
btw does anyone know a good site for javascrip tutorials?

Author:  krishon [ Wed May 28, 2003 6:45 pm ]
Post subject: 

i'm not too shure but try www.webmonkey.com and search for javascript, the site usually has some purty good stuff.

Author:  JSBN [ Wed May 28, 2003 6:51 pm ]
Post subject: 

w00t go web monkey


: