Neon Text II Multiple script help

**laytia** · 05-13-2008, 11:41 AM

Hi all, hope someone can help me since I have been trying to work this out for hours without any luck!!!

I am using the Neon Text II script and would like to duplicate it on the one page. I have tried playing with the script but being no expert I have come up with nothing!!

Is it possible to have this script twice, one underneath the other??? If so, I'd be very grateful if some could explain it to me, idoits terminology would be preferable!!!!!!
Thank you so much

**weirddemon** · 05-13-2008, 08:56 PM

For most simple things like this, you should try using the search function to try and see if this problem has already been resolved. I just did a quick search for "Neon Lights Text" and found that John had already answered this before

http://www.dynamicdrive.com/forums/s...on+lights+text

**laytia** · 05-13-2008, 10:52 PM

Thank you for your help however this answer applies to neon text one not two, and two is the one I want!

**jscheuer1** · 05-14-2008, 12:18 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

**jscheuer1** · 05-14-2008, 01:38 AM

Here's a multiple use Neon Lights II:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OO Neon Lights II - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#000;
}
</style>
<script type="text/javascript">

//OO Neon Lights Text II from Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de - This notice must remain for legal use
//Visit http://www.dynamicdrive.com for TOS
//Modified in http://www.dynamicdrive.com/forums/ by jscheuer1 for multiple use

///////////// No Need To Edit Here - See Below, in the Body /////////////

function neoII(id, nc, nc2, fs, fl, fl2, fp){
if(!document.getElementById&&!document.all) return;
this.id=id;//
this.el=document.getElementById? document.getElementById(id) : document.all[id];
this.message=this.el.innerHTML;
this.neonbasecolor=this.el.style.color;
this.neontextcolor=nc;
this.neontextcolor2=nc2;
this.flashspeed=fs;
this.flashingletters=fl;
this.flashingletters2=fl2;
this.flashpause=fp;

this.n=0;

for (var s='', m=0;m<this.message.length;m++)
s+='<span id="'+id+m+'">'+this.message.charAt(m)+'<\/span>';
this.el.innerHTML=s;;
this.beginneon();
}

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

neoII.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=this.neonbasecolor;
}

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

if (this.n>this.flashingletters-1)
this.crossref(this.n-this.flashingletters).style.color=this.neontextcolor2 ;
if (this.n>(this.flashingletters+this.flashingletters2)-1)
this.crossref(this.n-this.flashingletters-this.flashingletters2).style.color=this.neonbasecolor;


if (this.n<this.message.length-1)
this.n++;
else{
this.n=0;
clearInterval(this.flashing);
var c=this;
for (var m=0;m<this.message.length;m++)
this.crossref(m).style.color=this.neonbasecolor;
setTimeout(function(){c.beginneon();},this.flashpause);
return;
}
}

neoII.prototype.beginneon=function(){
var c=this;
this.flashing=setInterval(function(){c.neon();}, this.flashspeed);
}

</script>
</head>
<body>
<!-- Set Base Color as inline Style -->
<h2 id="neo1" style="color:gray;">Thank you for visiting Dynamic Drive!</h2>
<script type="text/javascript">
/*	EXPLANATION OF TERMS	/*
  id - id of the element containing the message
  neontextcolor - Text Color of main Flashing Section
  neontextcolor2 - Text Color of section trailing main Flashing Section
  flashspeed - speed of flashing in milliseconds
  flashingletters - number of letters flashing in neontextcolor
  flashingletters2 - number of letters flashing in neontextcolor2 (0 to disable)
  flashpause - the pause between flash-cycles in milliseconds
*/
//USAGE: new neoII('id', 'neontextcolor', 'neontextcolor2', flashspeed, flashingletters, flashingletters2, flashpause)
new neoII('neo1', 'yellow', '#ffffa8', 100, 3, 1, 0);
</script>
<div id="neo2" style="color:#ccc;font:110% sans-serif">This one is green, in a division and faster, with a pause between cycles.</div>
<script type="text/javascript">
new neoII('neo2', '#a8ffa8', 'green', 50, 5, 2, 1000);
</script>
</body>
</html>

The code is well documented, design changes in the body only.

**weirddemon** · 05-14-2008, 01:51 AM

I thought I found the one for Neon Lights II. Oh well, John was there to fix it all

**jscheuer1** · 05-14-2008, 02:25 AM

Oh, and here's a DOM level 2 version for those that don't like scripts that use innerHTML (usage is the same):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>OO Neon Lights II - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:#000;
}
</style>
<script type="text/javascript">

//OO Neon Lights Text II from Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de - This notice must remain for legal use
//Visit http://www.dynamicdrive.com for TOS
//Modified in http://www.dynamicdrive.com/forums/ by jscheuer1 for multiple use

///////////// No Need To Edit Here - See Below, in the Body /////////////

function neoII(id, nc, nc2, fs, fl, fl2, fp){
if(!document.createElement||(!document.getElementById&&!document.all)) return;
this.id=id;
this.el=document.getElementById? document.getElementById(id) : document.all[id];
this.message=this.el.firstChild.nodeValue;
this.el.firstChild.nodeValue='';
this.neonbasecolor=this.el.style.color;
this.neontextcolor=nc;
this.neontextcolor2=nc2;
this.flashspeed=fs;
this.flashingletters=fl;
this.flashingletters2=fl2;
this.flashpause=fp;

this.n=0;

for (var s, m=0; m < this.message.length; m++){
s=document.createElement('span');
s.id=id+m;
s.appendChild(document.createTextNode(this.message.charAt(m)));
this.el.appendChild(s);
}
this.beginneon();
}

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

neoII.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=this.neonbasecolor;
}

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

if (this.n>this.flashingletters-1)
this.crossref(this.n-this.flashingletters).style.color=this.neontextcolor2 ;
if (this.n>(this.flashingletters+this.flashingletters2)-1)
this.crossref(this.n-this.flashingletters-this.flashingletters2).style.color=this.neonbasecolor;


if (this.n<this.message.length-1)
this.n++;
else{
this.n=0;
clearInterval(this.flashing);
var c=this;
for (var m=0;m<this.message.length;m++)
this.crossref(m).style.color=this.neonbasecolor;
setTimeout(function(){c.beginneon();},this.flashpause);
return;
}
}

neoII.prototype.beginneon=function(){
var c=this;
this.flashing=setInterval(function(){c.neon();}, this.flashspeed);
}

</script>
</head>
<body>
<!-- Set Base Color as inline Style -->
<h2 id="neo1" style="color:gray;">Thank you for visiting Dynamic Drive!</h2>
<script type="text/javascript">
/*	EXPLANATION OF TERMS	/*
  id - id of the element containing the message
  neontextcolor - Text Color of main Flashing Section
  neontextcolor2 - Text Color of section trailing main Flashing Section
  flashspeed - speed of flashing in milliseconds
  flashingletters - number of letters flashing in neontextcolor
  flashingletters2 - number of letters flashing in neontextcolor2 (0 to disable)
  flashpause - the pause between flash-cycles in milliseconds
*/
//USAGE: new neoII('id', 'neontextcolor', 'neontextcolor2', flashspeed, flashingletters, flashingletters2, flashpause)
new neoII('neo1', 'yellow', '#ffffa8', 100, 3, 1, 0);
</script>
<div id="neo2" style="color:#ccc;font:110% sans-serif">This one is green, in a division and faster, with a pause between cycles.</div>
<script type="text/javascript">
new neoII('neo2', '#a8ffa8', 'green', 50, 5, 2, 1000);
</script>
</body>
</html>

Thread: Neon Text II Multiple script help

Thread Tools

Search Thread

Neon Text II Multiple script help

Bookmarks

Bookmarks

Posting Permissions