Jan 6 2007

DHTML effect: Fading

JavaScript, Technical stuff
See comments
I am working on a new addition to my RealSimpleBlog control (more about that later), and that gives me the occasion to clean up a few DHTML effects I have on my website. The goal is to make a JavaScript library, which, contrarily to the well known prototype.js or others, should be lean and modular, and use advanced JavaScript programming technique while sticking to accepted best practices for JavaScript programming (quite a program...
To achieve this, I have one JavaScript file per effect (this allows choosing precisely which script code you want to send to the web client). Effects are added to a given DOM node (typically a DIV, but that could be any other node) simply by creating a new instance of a JavaScript object and passing the DOM node to it. Additionally, options can be defined in a literal object, which allows them to be totally optional.
Of course, all the effects are cumulative, so a given DOM node can have as many effects as wanted (though good taste will probably limit the number of effects :-)
The first effect I am publishing is a fading effect, where a given node's opacity changes smoothly from one minimum value to a maximum value and back. Since opacity is unfortunately not handled in a standard way by the web browsers yet, only IE and Mozilla (Firefox, etc...) browsers have been fully tested. If you experience problems with this effect, please contact me with details.
Note: For opacity to work in Internet Explorer, it is necessary to set either "position: absolute" or a "float" value. If other positioning attributes are used, the opacity settings are ignored by IE. Firefox, however, doesn't have this limitation. That can be a real bother!
Previous entry | Next blog entry

Responses to “DHTML effect: Fading”

  1. Nathanael Says:
    May 18, 2007 6:08 PM

    Awesome - thank you!!

  2. Nathanael Says:
    May 20, 2007 3:42 PM

    ... although it isn't handling multiple triggerings too well - if I get time I'll look at the source, but perhaps you might have some ideas? I'm using it for feedback text on a WYSIWYG editor, so when you save it comes up with a [success] msg which fades out, but doesn't like when it's triggered again before it's finished fading.

    What would be good is either to change fade() to start again if re-called or another function that resets it to pre-fade condition.

  3. Laurent Says:
    May 20, 2007 7:04 PM

    Nathanael,

    Thanks for the input. Feel free to modify the source code at your convenience, it's all open. I'll put that bug report on my TODO list and I'll try to look into it ASAP, but I am very busy giving WPF trainings in my firm lately, which leaves me too exhausted to switch to JavaScript ;-)

    Thanks again,
    Laurent

Comments for DHTML effect: Fading