PDA

View Full Version : Need to use this script in more than one instance on one page



schwim
02-26-2007, 04:41 AM
1) Script Title: Neon Lights Text

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex10/neontext.htm

3) Describe problem:

Hi there,

The script works fine if I only want to use it once per page, but I need to use it three times.

What do I need to do to be able to use the script more than once on a page? Right now, it ruins all three instances when I try them together by mixing the colors up and only the first instance actually flashes.

thanks,
json

jscheuer1
02-26-2007, 05:58 AM
<!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">
<script type="text/javascript">

/*
* OO Neon Lights Text
* By JavaScript Kit (http://javascriptkit.com)
* This credit must remain for legal use
* For this script, TOS, and 100s more DHTML scripts,
* Visit http://www.dynamicdrive.com
* Modified for multiple use by jscheuer1 in
* http://www.dynamicdrive.com/forums
*/

//// No need to edit ////

function neo(id, nc, fs){
if (!document.all&&!document.getElementById)
return;
this.message=document.getElementById? document.getElementById(id).innerHTML : document.all[id].innerHTML;
this.neontextcolor=nc;
this.flashspeed=fs;
this.id=id;
this.n=0;
this.spans='';
for (var m=0;m<this.message.length;m++)
this.spans+='<span id="'+id+m+'">'+this.message.charAt(m)+'<\/span>';
with (document.getElementById? document.getElementById(id) : document.all[id])
innerHTML=this.spans;
this.beginneon();
}

neo.prototype.crossref=function(number){
return document.getElementById? document.getElementById(this.id+number) : document.all[this.id+number];
}

neo.prototype.neon=function(){

//Change all letters to base color
if (this.n==0){
for (var m=0;m<this.message.length;m++)
this.crossref(m).style.color='';
}

//cycle through and change individual letters to neon color
this.crossref(this.n).style.color=this.neontextcolor;

if (this.n<this.message.length-1)
this.n++
else{
this.n=0;
clearInterval(this.flashing);
var cacheobj=this;
setTimeout(function(){cacheobj.beginneon();},1500);
return;
}
}

neo.prototype.beginneon=function(){
var cacheobj=this;
this.flashing=setInterval(function(){cacheobj.neon();},this.flashspeed)
}
</script>

</head>
<body>
<h2>
<!-- Set span's style color property for base color -->
<span id="neon1" style="color:gray;">Welcome to Dynamic Drive!</span>
<script type="text/javascript">
//usage : new neo('span_id', 'neon_color', flash_speed);
new neo('neon1', 'yellow', 100);
</script>
</h2>
<h2>
<span id="neon2" style="color:black;">Here's another one - redder and faster!</span>
<script type="text/javascript">
new neo('neon2', 'red', 50);
</script>
</h2>

</body>
</html>

Notes: The main script goes in the head as shown and needs no editing. Short scripts in the body initialize each span by their id - that is where you set characteristic for each 'neo' instance as shown. The first one is commented to show how to do it.

schwim
02-27-2007, 03:51 AM
That worked spectacularly! Thanks very much for your help.

thanks,
json