PDA

View Full Version : 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/showthread.php?t=17923&highlight=neon+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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

jscheuer1
05-14-2008, 01:38 AM
Here's a multiple use Neon Lights II:


<!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):


<!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>