Flying Text - Help w/ Code?

**webdud** · 05-14-2006, 12:27 PM

Hi!

I was been "tinkering" with the "flying letters" script from the Text Animations portion of the site. http://www.dynamicdrive.com/dynamici.../flyletter.htmIs there a way that I can change the color of the message letters, & also cause the text to continually "repeat type" on the site?

I am a relative "newbie" w/ javascript & I appreciate any & all assistance!

Thanks!

**jscheuer1** · 05-14-2006, 06:55 PM

This script has a problem that I believe Twey (who wrote the current version) later fixed, at least for a similar script called 'typing text'. The trouble is that if javascript is disabled, one will see the $ used in the 'message'. There is an easy fix for this and for your requests.

Here is an updated demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fly {
color:red;
background-color:white;
}
</style>
</head>
<body>
<!-- Insert non-javascript version of message below -->
<h2 id="fly">Thanks for visiting<br>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 Dynamic Drive: 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 = 200; // milliseconds

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

function reinit(){
txt="",
	num=0,
	num4=0,
	flyofle="",
	flyofwi="",
	flyofto="";
stfly();
	}


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);
	}
else setTimeout("reinit()", 500)
}

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>
</body>
</html>

Notes: Color is set in the added style section in the head. Message is now set in the script with a different, correct looking for non-javascript browsers version of it inserted in the id="fly" header.

**Twey** · 05-14-2006, 07:34 PM

I didn't actually add any functionality to this script, I just updated it to work with other browsers than IE and remove some of the pointless eval() calls.

Thread: Flying Text - Help w/ Code?

Thread Tools

Search Thread

Flying Text - Help w/ Code?

Bookmarks

Bookmarks

Posting Permissions