/******************************************************************* * * File : AnimatedFader.js * * Created : 2000/05/28 * * Author : Roy Whittle (Roy@Whittle.com) www.Roy.Whittle.com * * Purpose : To create fading text descriptions * * History * Date Version Description * * 2000-05-28 1.0 Initial version. Based on the State Transition * Diagram created for animated rollovers I * modified the code to fade text. * 2000-05-29 1.1 I did not follow the STD correctly and introduced * a bug that left objects in the ON state. * This is now corrected. * 2000-06-07 1.2 Introduced a start colour so that the script * can be used on different backgrounds. * Change the var AnimationRunning and FrameInterval * so they don't conflict with animate2.js * 2000-08-09 1.3 Added Gecko ( Netscape 6 Preview Release 1 ) support * - Ken workman k.workman@3DASA.com * 2000-10-15 1.4 Modified to make Netscpe 6 (PR3) more efficient * by just changing the color instead of replacing * the whole content of the DIV. ***********************************************************************/ /*** Create some global variables ***/ var FadingObject = new Array(); var FadeRunning=false; var FadeInterval=30; /*******************************************************************************/ /*** These are the simplest HEX/DEC conversion routines I could come up with ***/ /*** I have seen a lot of fade routines that seem to make this a ***/ /*** very complex task. I am sure somene else must've had this idea ***/ /*******************************************************************************/ var hexDigit=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); function dec2hex(dec) { return(hexDigit[dec>>4]+hexDigit[dec&15]); } function hex2dec(hex) { return(parseInt(hex,16)) } /******************************************************************************************/ /*********************************************************** * Function : createFaderObject * * Parameters : theDiv - The name of the DIV in which to fade the text * numSteps - The number of steps to use in the fade. * startColor - The background colour of the page. * * Description : Creates an object that can hold the current * state of the fade animation for a particular DIV ***********************************************************/ function createFaderObject(theDiv, numSteps, startColor) { if(!startColor) startColor = "000000"; this.name = theDiv; this.text = null; this.color = "000099"; this.next_text = null; this.next_color = null; this.state = "OFF"; this.index = 0; this.steps = numSteps; this.r = hex2dec(startColor.slice(0,2)); this.g = hex2dec(startColor.slice(2,4)); this.b = hex2dec(startColor.slice(4,6)); } /*********************************************************** * Function : FadingText * * Parameters : theDiv - The name of the DIV in which to fade the text * numSteps - The number of steps to use in the fade. * * Description : Library function to be called from the main HTML. * Creates an object that can hold the current * state of the fade animation for a particular DIV ***********************************************************/ function FadingText(theDiv, numSteps, startColor) { FadingObject[theDiv] = new createFaderObject(theDiv, numSteps, startColor); } /***************************************************************** * Function : start_fading * * Description : If the FadeAnimation loop is not currently running * then it is started. *****************************************************************/ function start_fading() { if(!FadeRunning) FadeAnimation(); } /***************************************************************** * Function : set_text * * Description : In the new W3C DOM model we need only set the text * once, after that we can just change the colour *****************************************************************/ function set_text(f) { if(navigator.appName.indexOf("Netscape") != -1 && document.getElementById) { var theElement = document.getElementById(f.name); var newRange = document.createRange(); newRange.setStartBefore(theElement); var strFrag = newRange.createContextualFragment(f.text); while (theElement.hasChildNodes()) theElement.removeChild(theElement.lastChild); theElement.appendChild(strFrag); theElement.style.color="#"+f.startColor; } } /***************************************************************** * * Function : getColor * * Parameters : f - the fade object for which to calculate the colour. * * Description: Calculates the color of the link depending on * how far through the fade we are. * *****************************************************************/ function getColor(f) { var r=hex2dec(f.color.slice(0,2)); var g=hex2dec(f.color.slice(2,4)); var b=hex2dec(f.color.slice(4,6)); r2= Math.floor(f.r+(f.index*(r-f.r))/(f.steps) + .5); g2= Math.floor(f.g+(f.index*(g-f.g))/(f.steps) + .5); b2= Math.floor(f.b+(f.index*(b-f.b))/(f.steps) + .5); return("#" + dec2hex(r2) + dec2hex(g2) + dec2hex(b2)); } /***************************************************************** * * Function : setColor * * Parameters : fadeObj - The TextFader object to set * * Description: Gets the color of the text and writes it to * the DIV. * *****************************************************************/ function setColor(fadeObj) { var theColor=getColor(fadeObj); var str="" + fadeObj.text + ""; var theDiv=fadeObj.name; //if IE 4+ if(document.all) { document.all[theDiv].innerHTML=str; } //else if NS 4 else if(document.layers) { document.nscontainer.document.layers[theDiv].document.write(str); document.nscontainer.document.layers[theDiv].document.close(); } //else if NS 6 (supports new DOM, may work in IE5) - see Website Abstraction for more info. //http://www.wsabstract.com/javatutors/dynamiccontent4.shtml else if (document.getElementById) { theElement = document.getElementById(theDiv); theElement.style.color=theColor; } } /***************************************************************** * * Function : fade_up * * Parameters : theDiv - The div in which to display the text * newText - The text to display when faded in * newColor- The color the text will be. * * Description: Depending on the current "state" of the fade * this function will determine the new state and * if neccessary, start the fade effect. * *****************************************************************/ function fade_up(theDiv, newText, newColor) { var f=FadingObject[theDiv]; if(newColor == null) newColor="FFFFFF"; if(f.state == "OFF") { f.text = newText; f.color = newColor; f.state = "FADE_UP"; set_text(f); start_fading(); } else if( f.state == "FADE_UP_DOWN" || f.state == "FADE_DOWN" || f.state == "FADE_DOWN_UP") { if(newText == f.text) f.state = "FADE_UP"; else { f.next_text = newText; f.next_color = newColor; f.state = "FADE_DOWN_UP"; } } } /***************************************************************** * * Function : fade_down * * Parameters : theDiv - The div in which to display the text * * Description: Depending on the current "state" of the fade * this function will determine the new state and * if neccessary, start the fade effect. * *****************************************************************/ function fade_down(theDiv) { var f=FadingObject[theDiv]; if(f.state=="ON") { f.state="FADE_DOWN"; start_fading(); } else if(f.state=="FADE_DOWN_UP") { f.state="FADE_DOWN"; f.next_text = null; } else if(f.state == "FADE_UP") { f.state="FADE_UP_DOWN"; } } /******************************************************************* * * Function : Animate * * Description : This function is based on the Animate function * of animate.js (animated rollovers). * Each fade object has a state. This function * modifies each object and changes its state. *****************************************************************/ function FadeAnimation() { FadeRunning = false; for (var d in FadingObject) { var f=FadingObject[d]; if(f.state == "FADE_UP") { if(f.index < f.steps) f.index++; else f.index = f.steps; setColor(f); if(f.index == f.steps) f.state="ON"; else FadeRunning = true; } else if(f.state == "FADE_UP_DOWN") { if(f.index < f.steps) f.index++; else f.index = f.steps; setColor(f); if(f.index == f.steps) f.state="FADE_DOWN"; FadeRunning = true; } else if(f.state == "FADE_DOWN") { if(f.index > 0) f.index--; else f.index = 0; setColor(f); if(f.index == 0) f.state="OFF"; else FadeRunning = true; } else if(f.state == "FADE_DOWN_UP") { if(f.index > 0) f.index--; else f.index = 0; setColor(f); if(f.index == 0) { f.text = f.next_text; f.color = f.next_color; f.next_text = null; f.state ="FADE_UP"; set_text(f); } FadeRunning = true; } } /*** Check to see if we need to animate any more frames. ***/ if(FadeRunning) setTimeout("FadeAnimation()", FadeInterval); }