Member Avatar for tefflox

Idea: each character of the text will shimmer in varied shades of gray.

Please help debug the code ---

// this is all in the <head>

  <script type="text/javascript">

  	var timer = null;

  	colors = new Array(14)
  	colors[0]="0"
  	colors[1]="1"
  	colors[2]="2"
  	colors[3]="3"
  	colors[4]="4"
  	colors[5]="5"
  	colors[5]="6"
  	colors[6]="7"
  	colors[7]="8"
  	colors[8]="9"
  	colors[9]="a"
  	colors[10]="b"
  	colors[11]="c"
  	colors[12]="d"
  	colors[13]="e"
  	colors[14]="f"

  function genHex(){

  	digit = new Array(2)
  	color=""
  	for (j=0;j<3;j++){
  		digit[j]=colors[Math.round(Math.random()*14)]
  		color = color+digit[j]+digit[j]+digit[j];
  	}
  	return color;
  }




  function alter() {
  	var i = Math.round(Math.random() * 15); // 15 is arbitrary
  	document.getElementById(i).style.color=genHex();	

  }

  function altTimer() {

  	timer = setInterval("alter();", 200);
  }
  </script>

<?php
  function line($str) {
    for($i = 0, $n = 0; $str[$i] != ""; $i++, $n++) 
      echo ("<span id=\"".$n."\">".$str[$i]."</span>");
  }
 ?>

// and this is in the <body>



  <?php
    line("this is a line of text");
   ?>        
  
  <script type="text/javascript">
    altTimer();
    </script>
  • 2 Contributors
  • 1 Reply
  • 89 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for MidiMagic

You need an id on the object you want to make shimmer.

Also. most browsers will not update the screen until the script either ends or pauses execution (as in an alert statement).

You may need to recursively call your function with setInterval

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.