Full version: jsB@nk » Background » Fading background » Ultimate Fader v0.1
URL: https://www.javascriptbank.com/ultimate-fader-v01.html
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.
Full version: jsB@nk » Background » Fading background » Ultimate Fader v0.1
URL: https://www.javascriptbank.com/ultimate-fader-v01.html
<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--><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 externalscript(.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 fullyunderstand its many capabilities. The method linking is particularlyuseful as some unusual effects are possible with it. The key is thelast 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 backto a previous link, you get a continuous color change effect whichcan be interesting.One final note: color values MUST be in #RRGGBB format or thedefault starting color of "#000000" (black) and default ending colorof "#ffffff" (white) are used. Named colors are not supported.If you are interested in more comprehensive documentation ofthis subject with lots of examples, or would like a version thatdoes not use a constructor function, email me with your requestand/or questions. -------------------------- END NOTES AND INSTRUCTION.*********************************************************************/ /************************************ * what: Ultimate Fader v0.1 * * by: Louis H. Pitterman * * aka: The Octarine Mage * * email: [email protected] * * 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;elsethis.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;elseif(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;elseif(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;elseif(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--><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's background<OPTION value=5>table's border<OPTION value=6>table's text<OPTION value=7>all table colors<OPTION value=8>table cells' background<OPTION value=9>table cells' border<OPTION value=10>table cells' text<OPTION value=11>all cell colors<OPTION value=12>cell 10's background<OPTION value=13>cell 10's border<OPTION value=14>cell 10's text<OPTION value=15>all cell 10 colors<OPTION value=16>right panel's background<OPTION value=17>right panel's border<OPTION value=18>right panel'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 <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's cells' colors where faded. This is caused by changing the rules of a document'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.clientWidthdocBody.style.marginRight="10";if(dif>20)calc=docBody.clientWidth-demoTable.offsetWidth-30;elsecalc=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)+"])";elseif(colors.length-1==color)cycleFX.colors[color]="('"+colors[0]+"','"+colors[color]+"',100,cycleFX.colors["+(color-1)+"])";elsecycleFX.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-->