Neon Lights Text Line Break

**Nightwing308** · 04-03-2011, 05:38 PM

1) Script Title: Neon Lights Text

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

3) Describe problem:

I am using the Neon Lights Text (version ONE) for a news message, but need to create 2 sentences on 2 separate lines. How can I insert a line-break to move the second sentence below the first?
(inserting <br> doesn't seem to work).

**vwphillips** · 04-04-2011, 10:39 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<a id="tst" style="font-Size:30px;" >
Welcome to Dynamic Drive!<br />
Welcome to Dynamic Drive!<br />
Welcome to Dynamic Drive!<br />
<span>nested text</span> Welcome to Dynamic Drive!
</a>
<div id="tst2" style="font-Size:30px;" >
Welcome to Dynamic Drive!<br />
Welcome to Dynamic Drive!<br />
Welcome to Dynamic Drive!<br />
<div>nested text <span>nested text</span></div> Welcome to Dynamic Drive!
</div>

<script type="text/javascript">
/*<![CDATA[*/

function NeonLights(o){
 var obj=document.getElementById(o.ID),txtary=[],z0=0,txt,z0a,frag,z0a,span,colors=o.neoncolors;
 this.txtnodes(obj,txtary);
 this.ary=[];
 for (;z0<txtary.length;z0++){
  txt=txtary[z0].data;
  frag=document.createDocumentFragment();
  for (z0a=0;z0a<txt.length;z0a++){
   span=document.createElement('SPAN');
   span.style.color=colors[0];
   span.appendChild(document.createTextNode(txt.charAt(z0a)));
   frag.appendChild(span);
   this.ary.push(span);
  }
  txtary[z0].parentNode.replaceChild(frag,txtary[z0]);
 }
 this.colors=colors;
 this.ms=o.flashspeed;
 this.cnt=0;
 this.flash();
}

NeonLights.prototype={

 flash:function(){
  var oop=this,ary=this.ary,span=ary[this.cnt],z0=0;
  if (span){
   span.style.color=this.colors[1];
   this.cnt++;
   setTimeout(function(){ oop.flash(); },this.ms);
  }
  else {
   for (var z0=0;z0<ary.length;z0++){
    ary[z0].style.color=this.colors[0];
   }
   this.cnt=0;
   oop.flash();
  }
 },

 txtnodes:function(node,ary){
  var num=node.childNodes.length,z0=0,txt,fc,z0a,sp;
  for (;z0<num;z0++) {
   fc=node.removeChild(node.firstChild);
   if (fc.nodeType==3){
    ary.push(fc);
    node.appendChild(fc);
   }
   else {
    node.appendChild(fc);
    this.txtnodes(fc,ary);
   }
  }
 }

}


new NeonLights({
 ID:'tst',
 neoncolors:['gray','yellow'],
 flashspeed:100  //in milliseconds
});

new NeonLights({
 ID:'tst2',
 neoncolors:['red','blue'],
 flashspeed:200  //in milliseconds
});


/*]]>*/
</script>
</body>

</html>

**Nightwing308** · 05-16-2011, 05:22 PM

I sincerely apologize that I'm just now saying "Thanks" for your reply. Didn't even know it was posted since I forgot to subscribe to the thread.

Just found it now, looking for the same answer again (still).
But your resolution is EXACTLY what I was looking for, and it works like a charm. Thank You! Thank You! Thank You!

**Nightwing308** · 07-03-2011, 02:56 AM

Hi again Vic,

if you're still following this thread, I would have another question please.
Is there any way to set like a 5-second delay, so that once the entire text is colored, it doesn't immediately return to its original color and begins to change color again?

I've been playing around with your code, trying to change values in the section where it refers to a "setTimeout" function, but I either get errors, or it colors the text and then stops, or doesn't work at all.

Any advice on how to add such a delay/time-out at the end of the coloring sequence would be greatly appreciated.

Thread: Neon Lights Text Line Break

Thread Tools

Search Thread

Neon Lights Text Line Break

Bookmarks

Bookmarks

Posting Permissions