PDA

View Full Version : Flying Text Modification



mourenia
01-06-2006, 11:20 PM
It's me again! I found this flying text animation on dynamic drive, but it only works for IE5+. How do I make it Netscape and Firefox compatible?


<h2><span id="fly"></span></h2>

<script>
window.onerror=new Function("return true")

//Flying Letters script- by Matthias (info@freejavascripts.f2s.com)
//For this script and more, visit http://www.dynamicdrive.com

//Configure message to display. Use "$" for linebreak
message = "Thanks for visiting Dynamic Drive!" // $ = taking a new line
distance = 50 // pixel(s)
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++){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>

Thanks!
Wren

Twey
01-06-2006, 11:22 PM
It looks to be quite badly written. I've bookmarked this one, and will rewrite it nicely with compatibility on the morrow, if no-one else has by then.

mourenia
01-06-2006, 11:25 PM
Thanks! Before anybody gets on me about posting in this forum...let me just apologize, I should have posted it in the DD scripts forum. My bad! If Twey still wants to work on the compatibility that would be much appreciated. I'll be checkin it out as well...
Wren

Twey
01-07-2006, 03:29 PM
Done. I also got rid of those awful eval()s the author seemed to be so fond of, and added support for non-JS browsers.

<h2 id="fly">Thanks for visiting$Dynamic Drive!</h2>
<script type="text/javascript">

//Flying Letters script- by Matthias (info@freejavascripts.f2s.com)
// Modified by Twey for efficiency and compatibility
//For this script and more, visit http://www.dynamicdrive.com

//Configure message to display. Use "$" for linebreak
message = document.getElementById("fly").innerHTML; // $ = taking a new line
distance = 50; // pixel(s)
speed = 200; // milliseconds

var txt="",
num=0,
num4=0,
flyofle="",
flyofwi="",
flyofto="",
fly=document.getElementById("fly");


function stfly() {
for(i=0;i != message.length;i++) {
if(message.charAt(i) != "$")
txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
else
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) != "$") {
var then = document.getElementById("n" + num4);
then.style.left = flyofle - then.offsetLeft + flyofwi / 2;
then.style.top = flyofto - then.offsetTop + distance;
fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 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(lef2 >= 0)
lef2 -= num2;
else
lef2 += num2 * -1;
if(Math.floor(lef2) != -1) {
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2);
} else {
document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2 + 1);
}
if(lef2 >= 0)
top2 -= num3
else
top2 += num3 * -1;
if(Math.floor(top2) != -1)
document.getElementById(target).style.top = Math.floor(top2);
else
document.getElementById(target).style.top = Math.floor(top2 + 1);
setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)
}
}

stfly()

</script>Tested in Firefox 1.0.7, Opera 8.51, Konqueror 3.5.0-1.2 and IE 6.

mourenia
01-20-2006, 07:09 PM
Hi-

Sorry it's taken me so long to process this, got stuck doing other things. Alright so it works and it doesn't work. In IE6 the "fly" works but I can't get the variable "distance" to be modifiable (is that a word?;) In Firefox "distance" doesn't work at all and it returns a "type text" effect. I made no modifications to your code. The only thing I changed was the words that would be typed out. Any suggestions? I'm guessing this worked for you. Don't know why it's not working for me. I'm fine with the type text effect in Firefox but want to change the distance in IE6.

Thanks~
Wren

Twey
01-20-2006, 07:39 PM
is that a word?Yes :)
In Firefox "distance" doesn't work at all and it returns a "type text" effect.Really? It does here.
Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8) Gecko/20051201 Fedora/1.5-1.1.fc4.nr Firefox/1.5
I will test in IE just as soon as Windows has finished doing its little filesystem-checking thing. Isn't it about time Microsoft came up with a journaled filesystem?
/EDIT: Yes, works fine in IE (6) as well. Very strange. Does this happen for you if you don't change the text?

bradymc
12-28-2006, 03:17 PM
I'd like to use this script to display the results of another function that I'm using instead of specifying a text string in a <div>. The results of the function are stored in the variable 'sn'. Is there an easy way to modify the script? I've given it my best shot, but since I don't know much JS, I'm struggling. Also, I'd like to keep the code in an external JS file with the function mentioned above. Is that doable? Thanks.

Twey
12-28-2006, 09:46 PM
Instead of:
message = document.getElementById("fly").innerHTML; // $ = taking a new lineUse:
message = sn; // $ = taking a new lineI know a little more about Javascript now than I did when I updated this script before, and could probably do a better job now.

bradymc
12-29-2006, 12:55 AM
That seems like a simple enough answer, but I had already tried that. I tried it again and still have a big blank instead of any output. Do any of the other instances of "document.getElementById("fly").innerHTML" need to be changed? There's one just a few lines down in some variable declarations.

Let me be specific to what I'm trying to accomplish. I'm running a calculation in an external JS. If the calculation has exactly 8 digits, then I want it to output the numbers using this script, else give an error message in a normal document.write fashion. Is my attempt to use this externally from the document throwing some things off?

Twey
12-29-2006, 01:03 PM
If the calculation has exactly 8 digits, then I want it to output the numbers using this script, else give an error message in a normal document.write fashion.Avoid document.write(). It treats the DOM as a string, slows down page load, and can't be used after the page has finished loading.
Is my attempt to use this externally from the document throwing some things off?It may do, if you've included the flying-text script before the calculation script (so that sn isn't defined).

bradymc
12-29-2006, 01:35 PM
I nestled it into the 'then' part of an if-then-else just after the variable is defined so it should be ok... shouldn't it?

I've tried a few different JS and seem to always have the same problem. The text to be typed out is always defined by <div id=trigger>Text to type</div> where "trigger" is the identifier to the JS. I just assumed that I could modify that to read <div id=trigger><script>functionXYZ();</script></div>. But I can't get that to work either... whether the output of the function is a document.write or just returning the value of the variable.

Bin_
09-23-2008, 07:22 AM
Hello!
It work:

<h2 id="fly">Thanks for visiting$Dynamic Drive!</h2>
<script type="text/javascript" src="Fly.js"></script>

But it does not work:
<h2 id="fly">Thanks for visiting$Dynamic Drive!</h2>
<script type="text/javascript" src="Fly.js"></script>
<script type="text/javascript" src="Fly.js"></script>

Why?

I want to use "Flying Letters" in different places on page.