Flying Text Modification

[mourenia]

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]

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]

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]

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]

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]

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]

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]

Instead of:

message = document.getElementById("fly").innerHTML; // $ = taking a new line

Use:

message = sn; // $ = taking a new line

I 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]

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]

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