Jose Sandoval Google
 Resume     Book     Software     Drawings     Home     Subscribe to RSS feed Search Web Search show/hide combinations (toggle function)
Sunday, October 28, 2007

I use sporadically in different applications. Of course, too much of a good thing can ruin the essence of an application, and too much animation or thoughtless AJAXification can do this to a web site. We've all seen them: the ones that make everything disappear and appear at the blink of an eye without any user control. If we don't pay attention, AJAX could become what blink was to the Web 1.0 era--hated by some, loved by others.

Tonight, I was trying to create a toggle section for a portion of a web page I was editing. I took a look at the toggle control, which is found in the Effect object. To use it, you code:


This is a very useful control; however, whatever object you click to make the magic happen doesn't change--at least, I couldn't find any documentation to do so. For example, lets say you have a link called "OFF" to make something disappear. I think that you would want the "OFF" link to turn to "ON," so you can make the something reappear. As in:


If you tried it, you see that the toggle action works, but the "OFF" link doesn't change to "ON," i.e., there is nowhere to specify what to change using the Effect.toggle() function. (If you want to see the code, open it in a new window.)

I did, however, found a solution to my requirement. The implementation of my solution looks like:


If you tried this version, you see that the toggling action works the same way as above, but the control object changes (with a gratuitous cool fading effect). I didn't use the toggle() function, but I did use some of the functions available. (If you want to see the code, open it in a new window.)

I think this toggling function is a very common requirement, but I just couldn't find a native solution that gave me any control over the toggling trigger--in truth, I didn't look hard enough, who has time for that.

Anyway, my solution would work for any type of trigger, whether it is a link, an image, or any element in the DOM hierarchy.

If you don't use yet, you should give it a try: you can code cool Web 2.0 effects that are "guaranteed" to work across multiple browser.

11:09 PM | 0 comment(s) |


This page is powered by Blogger. Isn't yours?

© Jose Sandoval 2004-2009