[Tutorial][JavaScript] Flying Text

Asok · **Posted:** Sat Mar 08, 2003 10:16 am

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

Tony · **Posted:** Sat Mar 08, 2003 1:01 pm

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

but the result is cool Very Happy

Asok · **Posted:** Sat Mar 08, 2003 1:19 pm

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.

Delta · **Posted:** Tue Mar 25, 2003 2:03 pm

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

JSBN · **Posted:** Sun May 25, 2003 4:05 pm

*bump*

rizzix · **Posted:** Tue May 27, 2003 5:50 pm

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...

Asok · **Posted:** Tue May 27, 2003 6:20 pm

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

Dan · **Posted:** Wed May 28, 2003 6:37 pm

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

Homer_simpson · **Posted:** Wed May 28, 2003 6:39 pm

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

krishon · **Posted:** Wed May 28, 2003 6:45 pm

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

JSBN · **Posted:** Wed May 28, 2003 6:51 pm

w00t go web monkey

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members