JavaScript Fading Colors
I’m sure many of you are aware of the JavaScript scripts floating around the internet allowing for fading colors on web pages. The ones that I have seen tend to not use a class-based approach. Tonight I embarked on creating a color-fading class using only JavaScript. It was important for me to write this as a class for two reasons: I’m a great fan of object-oriented development, as it allows you to really ‘hook’ into the application (for testing, API documentation, and more).
What turned out to be the biggest problem was the timing between color changes. Traditionally JavaScript (JS) uses it’s infamous window.setTimeout() command to allow you to call functions after a certain amount of time has passed. The drawback with that command is that you cannot use objects with it, for the following reasons:
- If you pass in an object that depends on reference (i.e. you want to execute a class method for a certain instance of that class), it looses the reference, and most likely won’t find the method called.
- If you run multiple iterations and pass in variables to the method or object you are executing within setTimeout, and the code has completed running prior to executing the call in setTimeout, the each iteration will use the last available values of your iteration; it does not remember the individual values of the parameters of each iteration.
So, very bad situation. And searching the web only complicated things more for me. There had to be a simple way to get around this. This got me to thinking about how I could retain instance- and iteration-specific values, and still be able to use setTimeout. I had used function wrappers before in non-JS projects, so I thought it just might work here as well.
What I did was write a wrapper class for the setTimeout function. Each call to the setTimeout function would create a new instance of my wrapper class, thus retaining all the relevant information that I passed in at the time it was being passed in! And what do you know, it worked!
I have attached the code here, for your criticisms, as well as suggestions. Feel free to make use of it, should you like. Please do drop me a line if you do decide to use it. Also, if you make any updates or changes, please email me your changed code, as per the licensing agreement.
To use it, simply add a tag to any object that can have a background-color, like so:
<p fade="#ff0000|20|1500">Self-fading example (on page load).</p> <p fade="||">Self-fading defaults example (on page load).</p> <p onclick="FOBC.fade_element(this, 30, 3000, '#ffff66');">Event-driven fade (i.e. on click).</p> <p onclick="FOBC.fade_element(this);">Event-driven fade with defaults (i.e. on click).</p>
Click me for demo.
Download: fade.js
Include the file in your page header, like so: <script type=”text/javascript” src=”fade.js”></script>
Syntax is: fade=”[hex color]|[frames per second]|[duration in miliseconds]”.
To use the pre-set defaults, simply use the following: fade=”||”, however, fade=”" will not work.
The defaults are: fade=”#ffff66|30|3000″.
Using the previous syntax will fade all items on page-load.
To fade items on demand, use the following JS:
Syntax is: FOBC.fade_element([DOM object], [frames per second], [duration in miliseconds], [starting hex color], [target hex color]);.
To use the pre-set defaults, simply use the following: FOBC.fade_element(document.getElementById(”test”), null, null, null, null);.
Defaults are same as above.
[Updated August 16, 2007: Included click demo, and added code examples.]
[Updated August 24, 2007: improved click demo.]
[Update August 24, 2007:] I have discovered a bug that will break the rendering of the fading effect, and will have a fix for this in shortly: when clicking and dragging (speak: highlighting) text that has a fade event, the fade will stutter and then cease to fade entirely. This also occurs when high-lighting text with a fade event through double-clicking.