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>

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

This article has been dead for over six months. Start a new discussion instead.