Text Fader

[Total: 0    Average: 0/5]

This shows how to create a dynamic object that you can re-write the innerds of it as you go.

Head Code:

<script type=text/javascript src="http://www.js-examples.com/bin/div_construct.js"></script>
<script type=text/javascript>
var YourMessage = "Hi there - watch me fade in and out.";
var COLOR = new Array("00","11","22","33","44","55","66","77","88","99","AA","BB","CC","DD","EE","FF");
var _color = 0;
var Delay = 100; // msecs (0.1 seconds)
var Message  = "<font color=#"+COLOR[_color]+COLOR[_color]+COLOR[_color]+">";
    Message += YourMessage;
	Message += "</font>";
var _d = new NewDiv(window,"d1",Message);
</script>

Body Code:

<script type=text/javascript>
_d.output();
var goingUp = 1; // start at 00 go UP to FF
function ChangeColor() {
  if (goingUp != 0) {
    if (++_color > 15) {
	  _color=14;
	  goingUp = 0;
	}
  }
  else {
    if (--_color < 0) {
	  _color=1;
	  goingUp = 1;
	}
  }
  var _x  = "<font color=#"+COLOR[_color]+COLOR[_color]+COLOR[_color]+">";
      _x += YourMessage;
      _x += "</font>";
  _d.setBody(_x);
}
var timer = null; // preset to null!
function startIt() { stopIt();timer=setInterval("ChangeColor()",Delay);}
function stopIt() {if(timer){clearInterval(timer);timer=null;}}
</script>
<BR><a href="javascript:startIt()">Start Fade In and Out</a>
<BR><a href="javascript:stopIt()">Stop Fading In and Out</a>

Times Viewed: 1

Leave a Reply

Your email address will not be published. Required fields are marked *