Programming C, C++, Java, PHP, Ruby, Turing, VB
Computer Science Canada 
Programming C, C++, Java, PHP, Ruby, Turing, VB  

Username:   Password: 
 RegisterRegister   
 [Tutorial][JavaScript] Flying Text
Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Printable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic
Author Message
Asok




PostPosted: 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
Sponsor
Sponsor
Sponsor
sponsor
Tony




PostPosted: Sat Mar 08, 2003 1:01 pm   Post subject: (No subject)

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

but the result is cool Very Happy
Latest from compsci.ca/blog: Tony's programming blog. DWITE - a programming contest.
Asok




PostPosted: Sat Mar 08, 2003 1:19 pm   Post subject: (No 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.
Delta




PostPosted: Tue Mar 25, 2003 2:03 pm   Post subject: Cool!

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




PostPosted: Sun May 25, 2003 4:05 pm   Post subject: (No subject)

*bump*
rizzix




PostPosted: Tue May 27, 2003 5:50 pm   Post subject: (No 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...
Asok




PostPosted: Tue May 27, 2003 6:20 pm   Post subject: (No subject)

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




PostPosted: Wed May 28, 2003 6:37 pm   Post subject: (No subject)

opps my bad, i did not read it when i moved it Embarassed
Computer Science Canada Help with programming in C, C++, Java, PHP, Ruby, Turing, VB and more!
Homer_simpson




PostPosted: Wed May 28, 2003 6:39 pm   Post subject: (No subject)

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




PostPosted: Wed May 28, 2003 6:45 pm   Post subject: (No subject)

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




PostPosted: Wed May 28, 2003 6:51 pm   Post subject: (No subject)

w00t go web monkey
Display posts from previous:   
   Index -> Graphics and Design, Web Design -> (X)HTML Tutorials
View previous topic Tell A FriendPrintable versionDownload TopicRate TopicSubscribe to this topicPrivate MessagesRefresh page View next topic

Page 1 of 1  [ 11 Posts ]
Jump to:   


Style:  
Search: