Geeks With Blogs

News




What I do:

Identity Mine

MVVM Light

GalaSoft


What I am:

Microsoft Most Valuable Professional, Client Application Development

Microsoft Certified Technology Specialist, Windows Presentation Foundation

WPF disciples


Social:


View my profile on LinkedIn

XING
Creative Commons License
Diary of a Code Trotter by Laurent Bugnion is licensed under a Creative Commons Attribution 3.0 Unported License

All source code on this blog is licensed under the MIT license.

Copyright (c) 2006 - 2011 GalaSoft Laurent Bugnion

Laurent Bugnion (GalaSoft) Diary of a Code Trotter
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!
var oOptions = { iMinimum : 10, iMaximum : 90, iDeltaFade : 2, iTimerMilliseconds : 15, bRemoveAfterFade : true }; var oFadedNode = new gslb.FadedNode( document.getElementById( "divLogo" ), oOptions ); (with:) <div id="divLogo" style="filter: alpha(opacity=50); -moz-opacity: 0.5; display: block; float: center;"> <img src="http://www.galasoft-lb.ch/logo/smallhead.gif" /> </div>
Creating a fading node
Posted on Saturday, January 6, 2007 10:14 PM Technical stuff , JavaScript | Back to top


Comments on this post: DHTML effect: Fading

# re: DHTML effect: Fading
Requesting Gravatar...
Awesome - thank you!!
Left by Nathanael on May 18, 2007 6:08 PM

# re: DHTML effect: Fading
Requesting Gravatar...
... 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.
Left by Nathanael on May 20, 2007 3:42 PM

# re: DHTML effect: Fading
Requesting Gravatar...
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
Left by Laurent on May 20, 2007 7:04 PM

Comments have been closed on this topic.
Copyright © Laurent Bugnion | Powered by: GeeksWithBlogs.net