Blogless

Now more than ever, our clients want cool AJAX components for their sites. It seems like more often than not, we find ourselves creating whiz-bang image galleries, file upload forms, and a variety of other interactive components. These components can be tasteful and add much-needed fun to an otherwise run-of-the-mill interaction experience, so we like doing it.

One of the things we don’t like about it, however, is the ease with which web standards can be thrown out the window in the "getting it working" part of the component development. One of the most frustrating culprits is often the family of tags that are required to generate CSS-based opacity effects for interaction elements.

Now, I am generally against using Javascript to apply unsupported CSS definitions as a salvo against the mean red screen of the CSS validator. This is usually a bad idea because, among other reasons, it can fail to degrade gracefully if the user doesn’t have Javascript, and it provides a strategy to allow invalid CSS validate in cases where it really shouldn’t, it’s a little bit clunky when compared to other available methods, and frankly, introducing Javascript into the equation just to validate CSS rarely seems worth the trade-off. That said, in this situation, I think it’s legit because:

1. The opacity definition(s), while being supported by all current major browsers and darn useful, isn’t included in the CSS 2.1 spec, despite apparently being part of the jetpack-esque CSS 3 spec (::someday::), and doesn’t validate.
2. In the case of an AJAX component, you’re already requiring that your users have Javascript enabled, and hopefully you have a graceful exit strategy already in play if they don’t.
3. Your only other choice to achieve the effect you want is to use something like Flash, which is certainly worse even than invalid CSS.

So let’s take a look at how to save your opacity effects and your valid CSS using some handy DOM scripting.

Example: SmoothGallery

I like Mootools. I like its speed, and its clever implementations, and of course, its tiny size. From now until something better comes out, when I write example AJAX, it’s going to use Mootools. It rules. End of plug.

Along with the Mootools framework, I have (several times) used customized versions of JonDesign SmoothGallery, a free Mootools-based AJAX image gallery. It is a very nice little component in many respects, but, being one of these it doesn’t validate, which makes it untenable as a final client solution, at least out of the box.

By brilliant deduction, you will have already gathered that the reason it doesn’t validate is because CSS 2.1 doesn’t support a handful of opacity-related tags that SmoothGallery uses. It is full of CSS definitions that look like this:

filter: alpha(opacity=n);
-moz-opacity: n;
-khtml-opacity: n;
opacity: n;

Which lead to something like this:

Opacity: Does not compute!

To fix this up nicely, I always go in and delete these CSS definitions, and then write a little Javascript function, using the good old Mootools selectors, to apply these events at runtime:

function applyOpacity()
{
    if ($E('a.right'))
    {
        $E('a.right').setStyle("filter:","alpha(opacity=20)");
        $E('a.right').setStyle("-moz-opacity","0.2");
        $E('a.right').setStyle("-khtml-opacity", "0.2");
        $E('a.right').setStyle("opacity", "0.2");
        $E('a.right').addEvent('mouseover', function(e) {
            $E('a.right').setStyle("filter:","alpha(opacity=100)");
            $E('a.right').setStyle("-moz-opacity","1.0");
            $E('a.right').setStyle("-khtml-opacity", "1.0");
            $E('a.right').setStyle("opacity", "1.0");
        });
        $E('a.right').addEvent('mouseout', function(e) {
            $E('a.right').setStyle("filter:","alpha(opacity=20)");
            $E('a.right').setStyle("-moz-opacity","0.2");
            $E('a.right').setStyle("-khtml-opacity", "0.2");
            $E('a.right').setStyle("opacity", "0.2");
        });
    }
}

You’ll note that in addition to setting the default opacity, we have to add some events to mouseover and mouseout. This is because Mootools (currently) doesn’t support CSS pseudoselectors, so we have to replace the .n:hover definitions in the CSS with Javascript events.

Now all we have to do is call this method on domready (or on window load in more old-skool cases):

	window.addEvent('domready',applyOpacity);

Here are the final opacity effects in action, at one of our client sites, Angel Guardians, Inc:

Runtime-applied CSS opacity in an image slideshow. Look at the top left and top right corners.

And here’s the gin in your martini:

Opacity, computing!

Hopefully you can see how this abstracts to any situation in which CSS opacity is being used on elements in an AJAX component, and also to any Javascript framework. You can always use document.getElementsByClassName(’right’), or any other selector you
prefer, as well as window.onload = applyOpacity or your choice of any method of attaching a Javascript event.

Update (2008-05-24)

Due to some confusion regarding the application of this technique, I’ve created an example, which you can view online or download (12kb, zip).