« »

This constructor function allows you to fade any color (background, border or foregound) of any object. This is a complete demo, with lots of internal documentation and examples. There is only one document and no associated files. Enjoy.

Label: Ultimate Fader v0.1,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<STYLE type=text/css rel="stylesheet">BODY {
	BACKGROUND-COLOR: #000000; BORDER-BOTTOM: 10px solid; BORDER-LEFT: 10px solid; BORDER-RIGHT: 10px solid; BORDER-TOP: 10px solid; COLOR: #000000; FONT: 16px Verdana; MARGIN: 10px; OVERFLOW: auto
}
BUTTON {
	BACKGROUND-COLOR: #e0e0e0; BORDER-BOTTOM: silver 3px solid; BORDER-LEFT: white 3px solid; BORDER-RIGHT: silver 3px solid; BORDER-TOP: white 3px solid; CURSOR: hand
}
P {
	TEXT-INDENT: 2em
}
PRE {
	DISPLAY: inline; FONT: 12px Tahoma fixed
}
P:first-letter {
	FONT-SIZE: 150%; FONT-STYLE: normal; FONT-VARIANT: normal; FONT-WEIGHT: bold; LINE-HEIGHT: normal
}
SELECT {
	FONT: 16px Verdana
}
#demoTable {
	FONT: bold 20px Verdana; TEXT-ALIGN: center; VERTICAL-ALIGN: middle
}
#demoTable TD {
	BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 2px outset; BORDER-LEFT: #000000 2px outset; BORDER-RIGHT: #000000 2px outset; BORDER-TOP: #000000 2px outset; COLOR: #000000
}
#demoTable #tenthCell {
	BORDER-BOTTOM-STYLE: inset; BORDER-LEFT-STYLE: inset; BORDER-RIGHT-STYLE: inset; BORDER-TOP-STYLE: inset
}
#rightPanel {
	BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; COLOR: #000000; FLOAT: right; HEIGHT: 90%; OVERFLOW-X: auto; OVERFLOW-Y: scroll; WIDTH: 50%
}
#leftPanel {
	FLOAT: left; WIDTH: 234px
}
.block {
	PADDING-BOTTOM: 10px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; PADDING-TOP: 10px; TEXT-ALIGN: justify
}
.boxed {
	BORDER-BOTTOM: white 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: white 1px solid; BORDER-TOP: black 1px solid; MARGIN-TOP: 15px; PADDING-BOTTOM: 8px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 8px; TEXT-ALIGN: center
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT id=faderScript language=Javascript>
/*********************************************************************
           SOME NOTES AND INSTRUCTION.  PLEASE READ THIS.
           ----------------------------------------------

	The Fader script may be placed in any section of the document
(prior to its use, of course). It is best placed in an external
script(.js) file and linked into the document in the HEAD section.
The script has no dependencies and requires nothing else.

	Study the script and the examples in this document to fully
understand its many capabilities. The method linking is particularly
useful as some unusual effects are possible with it. The key is the
last link in the linked list. It MUST be set to the value 'false'
if you want the effects to eventually end. However, if you loop back
to a previous link, you get a continuous color change effect which
can be interesting.

	One final note: color values MUST be in #RRGGBB format or the
default starting color of "#000000" (black) and default ending color
of "#ffffff" (white) are used. Named colors are not supported.

	If you are interested in more comprehensive documentation of
this subject with lots of examples, or would like a version that
does not use a constructor function, email me with your request
and/or questions.

                   --------------------------
                   END NOTES AND INSTRUCTION.
*********************************************************************/

              /************************************
              * what:      Ultimate Fader v0.1    *  
              * by:        Louis H. Pitterman     *
              * aka:       The Octarine Mage      *
              * email:     octarinemage@yahoo.com *
              * copyright: (c) 2004               *
              *            All Rights Reserved    *
              * requires:  IE5.0 or better        *
              *************************************
              *     Do not use for commercial     *
              *    purposes. Else, use freely     *
              *   if this remains with script.    *
              ************************************/

/*********************************************************************
                     begin Fader constructor
*********************************************************************/
function Fader(object,id,property)
{
	this.id=id;            /* (required) used in setTimeout */
	if(property)           /* (optional) property name      */
		this.id+="."+property;
	else
		this.id+=".fade";
	this.object=object;    /* (required) pointer to object  */
	this.sColor="#000000"; /* (default) start color         */
	this.eColor="#ffffff"; /* (default) end color           */
	this.interval=25;      /* interval between refreshes    */
	this.bgColor=null;     /* holds background colors       */
	this.bgIndex=0;        /* index to background colors    */
	this.bgNext=null;      /* for linking to next method    */
	this.bgSteps=100;       /* number of background steps    */
	this.bdColor=null;     /* holds border colors           */
	this.bdIndex=0;        /* index to border colors        */
	this.bdNext=null;      /* for linking to next method    */
	this.bdSteps=100;      /* number of border steps        */
	this.fgColor=null;     /* holds foreground colors       */
	this.fgIndex=0;        /* index to foreground colors    */
	this.fgNext=null;      /* for linking to next method    */
	this.fgSteps=100;      /* number of foreground steps    */
}

/************************
 shorthand - for brevity
************************/
Fader.prototype.fade=window.setTimeout;

/*****************************
 valid hexadexical characters
*****************************/
Fader.prototype.hex="0123456789ABCDEF";

/******************************************
 returns decimal value of an RGB component
******************************************/
Fader.prototype.decimal=function(rgb,ndx)
{
	with(this)
		with(rgb)
			return 16*hex.indexOf(charAt(ndx))+
				  hex.indexOf(charAt(ndx+1));
}

/************************************
 returns an array of gradient colors
************************************/
Fader.prototype.gradient=function(scolor,ecolor,steps)
{
	with(this)
	{
		if(!scolor||"#"!=scolor.toString().charAt(0))
			scolor=sColor;
		scolor=scolor.toUpperCase();
		if(!ecolor||"#"!=ecolor.toString().charAt(0))
			ecolor=eColor;
		ecolor=ecolor.toUpperCase();
		var val=[];
		var dif=[];
		for(var ndx=pos=0;3>ndx;ndx++)
		{
			pos=ndx*2+1;
			val[ndx]=decimal(scolor,pos);
			dif[ndx]=(decimal(ecolor,pos)-val[ndx])/(steps-1);
		}
		var clr=[];
		for(ndx=0;steps>ndx;ndx++)
		{
			clr[ndx]="#";
			for(pos=0;3>pos;pos++)
			{
				clr[ndx]+=hex.charAt(val[pos]/16)+
					  hex.charAt(val[pos]%16);
				val[pos]+=dif[pos];
			}
		}
		clr[steps-1]=ecolor;
		return clr;
	}
}

/*****************************************
 fades the background color - do not call
*****************************************/
Fader.prototype.bgcolor=function(scolor,ecolor,steps,next)
{
	with(this)
		if(bgSteps>bgIndex)
		{
			if(!bgColor)
				bgColor=gradient(scolor,ecolor,steps);
			if(next)
				bgNext=next;
			else
				if(false==next)
					bgNext=null;
			if("undefined"!=typeof object.style)
				object.style.setAttribute
				("backgroundColor",bgColor[bgIndex]);
			++bgIndex;
			fade(id+".bgcolor()",interval);
		}
		else
		{
			bgColor=null;
			bgIndex=0;
			if(bgNext)
				window.execScript
				(id+".background"+bgNext);
		}
}

/*****************************************************
 fades the background color - call this
 (returns object so methods can chain in code)
*****************************************************/
Fader.prototype.background=function(scolor,ecolor,steps,next)
{
	with(this)
	{
		if(steps)
			bgSteps=steps;
		if(!bgColor)
			bgcolor(scolor,ecolor,bgSteps,next);
	}
	return this;
}

/*************************************
 fades the border color - do not call
*************************************/
Fader.prototype.bdcolor=function(scolor,ecolor,steps,next)
{
	with(this)
		if(bdSteps>bdIndex)
		{
			if(!bdColor)
				bdColor=gradient(scolor,ecolor,steps);
			if(next)
				bdNext=next;
			else
				if(false==next)
					bdNext=null;
			if("undefined"!=typeof object.style)
				object.style.setAttribute
				("borderColor",bdColor[bdIndex]);
			++bdIndex;
			fade(id+".bdcolor()",interval);
		}
		else
		{
			bdColor=null;
			bdIndex=0;
			if(bdNext)
				window.execScript
				(id+".border"+bdNext);
		}
}

/***********************************
 fades the border color - call this
***********************************/
Fader.prototype.border=function(scolor,ecolor,steps,next)
{
	with(this)
	{
		if(steps)
			bdSteps=steps;
		if(!bdColor)
			bdcolor(scolor,ecolor,bdSteps,next);
	}
	return this;
}

/***********************************
 fades the text color - do not call
***********************************/
Fader.prototype.fgcolor=function(scolor,ecolor,steps,next)
{
	with(this)
		if(fgSteps>fgIndex)
		{
			if(!fgColor)
				fgColor=gradient(scolor,ecolor,steps);
			if(next)
				fgNext=next;
			else
				if(false==next)
					fgNext=null;
			if("undefined"!=typeof object.style)
				object.style.setAttribute
				("color",fgColor[fgIndex]);
			++fgIndex;
			fade(id+".fgcolor()",interval);
		}
		else
		{
			fgColor=null;
			fgIndex=0;
			if(fgNext)
				window.execScript
				(id+".foreground"+fgNext);
		}
}

/*********************************
 fades the text color - call this
*********************************/
Fader.prototype.foreground=function(scolor,ecolor,steps,next)
{
	with(this)
	{
		if(steps)
			fgSteps=steps;
		if(!fgColor)
			fgcolor(scolor,ecolor,fgSteps,next);
	}
	return this;
}

/*********************************************************************
                       end Fader constructor
*********************************************************************/
		</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV>
<DIV align=center>To fade <SELECT id=selectProperty onchange=rightPanel.focus()> 
  <OPTION selected value=0>document background<OPTION value=1>document border<OPTION value=2>
	document text<OPTION value=3>all document colors<OPTION 
  value=4>table&#39;s background<OPTION value=5>table&#39;s border<OPTION 
  value=6>table&#39;s text<OPTION value=7>all table colors<OPTION value=8>table 
	cells&#39; background<OPTION value=9>table cells&#39; border<OPTION value=10>table 
	cells&#39; text<OPTION value=11>all cell colors<OPTION value=12>cell 10&#39;s 
	background<OPTION value=13>cell 10&#39;s border<OPTION value=14>cell 10&#39;s text<OPTION value=15>

	all cell 10 colors<OPTION value=16>right panel&#39;s background<OPTION value=17>
	right panel&#39;s border<OPTION value=18>right panel&#39;s text<OPTION value=19>all 
	right panel colors</OPTION></SELECT> from <SELECT 
id=selectStartColor onchange=rightPanel.focus()></SELECT> to <SELECT 
id=selectEndColor onchange=rightPanel.focus()></SELECT> in <SELECT 
id=selectSteps onchange=rightPanel.focus()> <OPTION value=1>1<OPTION 
  value=25>25<OPTION selected value=50>50<OPTION value=100>100<OPTION 
  value=150>150<OPTION value=200>200</OPTION></SELECT> step(s), click&nbsp;<BUTTON 
onclick=fadeColors()>GO</BUTTON>. </DIV><BR>

<DIV id=leftPanel>
<TABLE border=2 borderColor=#000000 borderColorDark=#000000 
borderColorLight=#000000 cellPadding=4 cellSpacing=10 id=demoTable>
  <TBODY>
  <TR>
    <TD>0</TD>
    <TD>1</TD>
    <TD>2</TD>
    <TD>3</TD></TR>

  <TR>
    <TD>4</TD>
    <TD>5</TD>
    <TD>6</TD>
    <TD>7</TD></TR>
  <TR>
    <TD>8</TD>

    <TD>9</TD>
    <TD>10</TD>
    <TD>11</TD></TR>
  <TR>
    <TD>12</TD>
    <TD>13</TD>

    <TD>14</TD>
    <TD>15</TD></TR></TBODY></TABLE>
<DIV class=boxed id=blinkFX>BLINKING EFFECT </DIV>
<DIV class=boxed id=cycleFX>CYCLING EFFECT </DIV><BR>
<DIV align=center><BUTTON onclick=reportColors()>Color Report</BUTTON> 
</DIV><p align=center><font face="arial, helvetica" size=-2><br><br><br>
Over 2000+ free Javascript<br>at <a href="http://javascriptbank.com">
JavaScriptBank.com Website</a>

</font>
</p></DIV>
<DIV id=rightPanel>
<DIV class=block>
<P>Did you see a transition? Not! The colors of the elements of the page were 
actually faded from one color to another. No kidding. </P>
<P>Hello. The <B>Fader</B> object is a <B>Javascript constructor function</B>. 
It creates a property called <B>fade</B> (which can optionally be named 
something else). The new property gives any object it refers to the ability to 
fade its background, foreground, and border colors from one color to another. 
</P>
<P>Try it out! Select an option, select one of the web-safe colors, then click 
on the <B>GO</B> button. </P>

<P>Maybe you noticed some browser objects, such as the scrollbars and - to a 
lesser degree - the select boxes and button, blinking or adjusting when the 
table&#39;s cells&#39; colors where faded. This is caused by changing the rules of a 
document&#39;s styleSheet object directly. Because the renderer does not know what 
is on the page affected by that rule beforehand, it apparently goes on and 
refreshes these browser objects every time a rule is changed. For this reason, 
avoid using the fader on styleSheet rules when objects like these are on the 
page. </P>
<P>Lest you wonder, the <B>setTimeout</B> method of the window object requires 
an interval value measured in exact milliseconds, but keep in mind that the code 
itself consumes processor time, so some slight variance in performance and speed 
from computer to computer is to be expected. </P>This document is a complete 
demo. If you are interested in using this script, right-click, select View 
Source, and Save to disk. You can then cut and paste the parts you need. </DIV>
<DIV class=block id=code></DIV></DIV></DIV>
<SCRIPT language=Javascript>

with(window)
{
	var winDoc=document;
	var docBody=winDoc.body;

	onresize=function()
	{
		if("undefined"!=typeof rightPanel)
		{
			leftPanel.style.width=demoTable.offsetWidth+"px";
			var calc=docBody.clientHeight-leftPanel.offsetTop-15;
			if(calc<demoTable.offsetWidth)
				calc=demoTable.offsetWidth;
			rightPanel.style.height=calc+"px";
			var dif=docBody.offsetWidth-docBody.clientWidth
			docBody.style.marginRight="10";
			if(dif>20)
				calc=docBody.clientWidth-demoTable.offsetWidth-30;
			else
				calc=docBody.clientWidth-demoTable.offsetWidth-dif-20;
			if(calc<demoTable.offsetHeight)
				calc=demoTable.offsetHeight;
			rightPanel.style.width=calc+"px";
		}
	}
	onload=function()
	{
		var code=winDoc.getElementById("code");
		code.insertAdjacentHTML("BeforeEnd","<pre>"+faderScript.innerHTML+"</pre>");
		code.insertAdjacentHTML("BeforeEnd","<pre>"+examples.innerHTML+"</pre>");
		this.onresize();
		rightPanel.focus();
		cycleFX.fade=new Fader(cycleFX,"cycleFX");
		with(cycleFX)
			fade.background("#000000","#f0f8ff",150,colors[colors.length-1]);
		this.defaultStatus=winDoc.title+" - courtesy of The Octarine Mage";
		this.onload=null;
	}
	with(document)
	{
		var leftPanel=getElementById("leftPanel");
		var selectProperty=getElementById("selectProperty");
		var selectStartColor=getElementById("selectStartColor");
		var selectEndColor=getElementById("selectEndColor");
		var cycleFX=getElementById("cycleFX");
	}
}

var Scolor;
var Ecolor;
var Steps;

/* web-safe colors */
var colors=
[
	"#f0f8ff","#faebd7","#00ffff","#7fffd4","#f0ffff","#f5f5dc",
	"#ffe4c4","#000000","#ffebcd","#0000ff","#8a2be2","#a52a2a",
	"#deb887","#5f9ea0","#7fff00","#d2691e","#ff7f50","#6495ed",
	"#fff8dc","#dc143c","#00ffff","#00008b","#008b8b","#b8860b",
	"#a9a9a9","#006400","#bdb76b","#8b008b","#556b2f","#ff8c00",
	"#9932cc","#8b0000","#e9967a","#8fbc8b","#483d8b","#2f4f4f",
	"#00ced1","#9400d3","#ff1493","#00bfff","#696969","#1e90ff",
	"#b22222","#fffaf0","#228b22","#f0c00a","#dcdcdc","#f8f8ff",
	"#ffd700","#daa520","#808080","#008000","#adff2f","#f0fff0",
	"#ff69b4","#cd5c5c","#4b0082","#fffff0","#f0e68c","#e6e6fa",
	"#fff0f5","#7cfc00","#fffacd","#add8e6","#f08080","#e0ffff",
	"#fafad2","#90ee90","#d3d3d3","#ffb6c1","#ffa07a","#20b2aa",
	"#87cefa","#778899","#b0c4de","#ffffe0","#00ff00","#32cd32",
	"#faf0e6","#ff00ff","#800000","#66cdaa","#0000cd","#ba55d3",
	"#9370db","#3cb371","#7b68ee","#00fa9a","#48d1cc","#c71585",
	"#191970","#f5fffa","#ffe4e1","#ffe4b5","#ffdead","#000080",
	"#fdf5e6","#808000","#6b8e23","#ffa500","#ff4500","#da70d6",
	"#eee8aa","#98fb98","#afeeee","#db7093","#ffefd5","#ffdab9",
	"#cd853f","#ffc0cb","#dda0dd","#b0e0e6","#800080","#ff0000",
	"#bc8f8f","#4169e1","#8b4513","#fa8072","#f4a460","#2e8b57",
	"#fff5ee","#a0522d","#c0c0c0","#87ceeb","#6a5acd","#708090",
	"#fffafa","#00ff7f","#4682b4","#d2b48c","#008080","#d8bfd8",
	"#ff6347","#40e0d0","#ee82ee","#f5deb3","#ffffff","#f5f5f5",
	"#ffff00","#9acd32"
];

cycleFX.colors=[]
var color,option;
for(color in colors)
{
	color*=1;
	option=winDoc.createElement("OPTION");
	option.style.backgroundColor=option.value=colors[color];
	option.text=color;
	selectStartColor.add(option);
	option=winDoc.createElement("OPTION");
	option.style.backgroundColor=option.value=colors[color];
	option.text=color;
	selectEndColor.add(option);
	if(0==color)
		cycleFX.colors[0]="('"+colors[1]+"','"+colors[0]
			+"',100,cycleFX.colors["+(colors.length-1)+"])";
	else
		if(colors.length-1==color)
			cycleFX.colors[color]="('"+colors[0]+"','"+colors[color]
				+"',100,cycleFX.colors["+(color-1)+"])";
		else
			cycleFX.colors[color]="('"+colors[color+1]+"','"+colors[color]
				+"',100,cycleFX.colors["+(color-1)+"])";
}
selectStartColor[Math.round(Math.random()*colors.length-1)].selected=true;
selectEndColor[Math.round(Math.random()*colors.length-1)].selected=true;

function fadeColors()
{
	if("complete"!=docBody.readyState)
		return;
	rightPanel.focus()
	Scolor=selectStartColor.value;
	Ecolor=selectEndColor.value;
	Steps=selectSteps.value;
	var mlink="(Scolor,Ecolor,Steps,false)";
	switch(selectProperty.selectedIndex)
	{
		case 0:
			body.fade.background(body.style.backgroundColor,Scolor,Steps,mlink);
			break;
		case 1:
			body.fade.border(body.style.borderColor,Scolor,Steps,mlink);
			break;
		case 2:
			body.fade.foreground(body.style.color,Scolor,Steps,mlink);
			break;
		case 3:
			body.fade
				.background(body.style.backgroundColor,Scolor,Steps,mlink)
				.border(body.style.borderColor,Scolor,Steps,mlink)
				.foreground(body.style.color,Scolor,Steps,mlink);
			break;
		case 4:
			demoTable.fade.background(demoTable.style.backgroundColor,Scolor,Steps,mlink);
			break;
		case 5:
			demoTable.fade.border(demoTable.style.borderColor,Scolor,Steps,mlink);
			break;
		case 6: /* no effect after cells are colored */
			demoTable.fade.foreground(demoTable.style.color,Scolor,Steps,mlink);
			break;
		case 7:
			demoTable.fade
				.background(demoTable.style.backgroundColor,Scolor,Steps,mlink)
				.border(demoTable.style.borderColor,Scolor,Steps,mlink)
				.foreground(demoTable.style.color,Scolor,Steps,mlink);
			break;
		case 8:
			rule.fade.background(cssRule.style.backgroundColor,Scolor,Steps,mlink);
			break;
		case 9:
			rule.fade.border(cssRule.style.borderColor,Scolor,Steps,mlink);
			break;
		case 10:
			rule.fade.foreground(cssRule.style.color,Scolor,Steps,mlink);
			break;
		case 11:
			rule.fade
				.background(cssRule.style.backgroundColor,Scolor,Steps,mlink)
				.border(cssRule.style.borderColor,Scolor,Steps,mlink)
				.foreground(cssRule.style.color,Scolor,Steps,mlink);
			break;
		case 12:
			tenthCell.myFade.background(tenthCell.style.backgroundColor,Scolor,Steps,mlink);
			break;
		case 13:
			tenthCell.myFade.border(tenthCell.style.borderColor,Scolor,Steps,mlink);
			break;
		case 14:
			tenthCell.myFade.foreground(tenthCell.style.color,Scolor,Steps,mlink);
			break;
		case 15:
			tenthCell.myFade
				.background(tenthCell.style.backgroundColor,Scolor,Steps,mlink)
				.border(tenthCell.style.borderColor,Scolor,Steps,mlink)
				.foreground(tenthCell.style.color,Scolor,Steps,mlink);
			break;
		case 16:
			rightPanel.fade.background(rightPanel.style.backgroundColor,Scolor,Steps,mlink);
			break;
		case 17:
			rightPanel.fade.border(rightPanel.style.borderColor,Scolor,Steps,mlink);
			break;
		case 18:
			rightPanel.fade.foreground(rightPanel.style.color,Scolor,Steps,mlink);
			break;
		case 19:
			rightPanel.fade
				.background(rightPanel.style.backgroundColor,Scolor,Steps,mlink)
				.border(rightPanel.style.borderColor,Scolor,Steps,mlink)
				.foreground(rightPanel.style.color,Scolor,Steps,mlink);
			break;
	}
}

function reportColors()
{
	if("complete"!=docBody.readyState)
		return;
	rightPanel.focus()
	alert
	(
		"\t    Color Report"
		+"\n-----------------------------------------------"
		+"\nObject\tAttribute\t\tColor"
		+"\n-----------------------------------------------"
		+"                   \ndocument"
		+"\n\tbackground=\t"+body.style.backgroundColor
		+"\n\tborder=\t\t"+body.style.borderColor
		+"\n\ttext=\t\t"+body.style.color
		+"\ntable"
		+"\n\tbackground=\t"+demoTable.style.backgroundColor
		+"\n\tborder=\t\t"+demoTable.style.borderColor
		+"\n\ttext=\t\t"+demoTable.style.color
		+"\ntable cells"
		+"\n\tbackground=\t"+cssRule.style.backgroundColor
		+"\n\tborder=\t\t"+cssRule.style.borderColor
		+"\n\ttext=\t\t"+cssRule.style.color
		+"\ntable's 10th cell"
		+"\n\tbackground=\t"+tenthCell.style.backgroundColor
		+"\n\tborder=\t\t"+tenthCell.style.borderColor
		+"\n\ttext=\t\t"+tenthCell.style.color
		+"\nright panel"
		+"\n\tbackground=\t"+rightPanel.style.backgroundColor
		+"\n\tborder=\t\t"+rightPanel.style.borderColor
		+"\n\ttext=\t\t"+rightPanel.style.color
		+"\ncycling color box"
		+"\n\tbackground=\t"+cycleFX.style.backgroundColor
		+"\n-----------------------------------------------"
		+"\n       courtesy of The Octarine Mage"
	)
}
		</SCRIPT>

<SCRIPT defer id=examples language=Javascript>
/* Examples: this is how this document was faded.
*************************************************/
var getElementById=window.document.getElementById;
var black="#000000";
var blue="#0000ff";
var green="#008000";
var red="#ff0000";
var silver="#c0c0c0";
var white="#ffffff";

/* fading the document
**********************/
var body=window.document.body;
body.fade=new Fader(body,"body");
body.fade.background(black,"#d2b48c");
body.fade.border(black,"#ffe5d5");
body.fade.foreground(white,black);

/* fading the table
*******************/
var demoTable=getElementById("demoTable");
demoTable.fade=new Fader(demoTable,"demoTable");

/* example of object scoping */
with(demoTable.fade)
{
	background(black,"#008b8b");
	border(white,"#008b8b");
	foreground(black,"#008b8b");
}

/* fading all table cells via style sheet.
******************************************/
var cssRule,rule,rules,selector="#demoTable TD";
var sheet,sheets=window.document.styleSheets;
for(sheet in sheets)
{
	rules=sheets[sheet].rules;
	for(rule in rules)
		if(selector==rules[rule].selectorText)
		{
			cssRule=rules[rule];
			break;
		}
	if(cssRule)
		break;
}

/* cannot expando a rule, so... */
rule={fade:new Fader(cssRule,"rule")};

/* example of method chaining */
rule.fade
	.background(black,"#f5deb3")
	.border(black,"#f4a460")
	.foreground(black,"#8b4513");

/* fading table's 10th cell
***************************/
var tenthCell=demoTable.cells[10]

/* example of using a different property name */
tenthCell.myFade=new Fader(tenthCell,"tenthCell","myFade");
tenthCell.myFade
	.background(black,"#8b4513")
	.border(black,silver)
	.foreground(black,white);

/* fading the right panel
*************************/
var rightPanel=getElementById("rightPanel");
rightPanel.fade=new Fader(rightPanel,"rightPanel");

/* examples of method linking */
var next3="(blue,'#f5deb3',50,false)";
var next2="(green,blue,50,next3)";
var next1="(red,green,50,next2)";
rightPanel.fade
	.background(black,red,50,next1)
	.border(black,'#f5deb3',50,"('#f5deb3',white,50,false)")
	.foreground(black,white,50,"(white,black,50,false)");

/* fading continuously
**********************/
var blinkFX=getElementById("blinkFX");
blinkFX.fade=new Fader(blinkFX,"blinkFX");

/* example of a blink effect */
var fx2="(white,black,25,fx1)";
var fx1="(black,white,25,fx2)";
blinkFX.fade.foreground(white,black,50,fx1);

/* suggested enhancements
*********************************************
1) add code to handle scrollbar colors.
2) add code to color the browser objects.
3) put enough HTML objects on the screen to
   use this document as a complete color
   tester.
********************************************/
		</SCRIPT>

</BODY>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->