Unobtrusive Rollovers Using YUI

April 28, 2008 at 4:12 pm by Eric Miraglia | In Accessibility, Development | 10 Comments

Chad at 2tbsp.com wrote up a nice tutorial last week outlining some practical fundamentals with respect to writing "unobtrusive JavaScript." His example implements a standard rollover, beginning with bad-old-days obtrusive scripting, migrating to unobtrusive scripting, and concluding with an unobtrusive script that leverages YUI’s Event Utility for event attachment and the Dom Collection’s getElementsByClassName, addClass and removeClass for class management.

Click through for his functioning example.

Of course, Chad just means this as an example of some of the practical points involved in unobtrusive scripting. Others have looked at the problem more encyclopedically — for a more ambitious (and not YUI-related) analysis of the paradigm, check out Christian Heilmann’s "The seven rules of Unobtrusive JavaScript".

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

10 Comments »

RSS feed for comments on this post. TrackBack URI

Looks great, but couldn’t we have achieved the same effect using only standard CSS selectors?
I usually tend to use CSS when possible as it works also on browsers that do not allow JS execution.

Comment by Christian Decker — April 28, 2008 #
I don’t see the point here… like Christian said, this could be done purely in CSS; why bother with JavaScript to do something this trivial?

Comment by Eric Ferraiuolo — April 28, 2008 #
The reason why techniques like this have evolved is that IE didn’t support hover except on anchor elements. So you can do almost all of this in CSS, except if you want to support IE, then you have to have a fallback. I think Chad’s article though is meant to describe a technique you can hang more stuff off of than just a CSS hover…this just illustrates the foundation for what you’d do to make your script unobtrusive.

Comment by Arthur M — April 28, 2008 #
@Christian/Eric, Fair enough — but I saw the example as being more of indication of how we’ve evolved from writing JavaScript inline and using it to modify style objects directly to separating the presentation and script pieces out and then using libraries to make the solution more scalable. As Arthur points out, IE’s :hover issues make this kind of strategy directly relevant in some cases — and even more relevant if you’re doing something more interesting than just toggling styles, which is often the case in rollover implementations. I don’t think Chad was advocating the use of JavaScript where only CSS is necessary; rather, I saw him exemplifying the progression toward an unobtrusive pattern for those cases where JS will be required. -Eric

Comment by Eric Miraglia — April 28, 2008 #
About 2 weeks ago, orange.mu was launched, where we use more or less the same thing, with roll over menus. Nice tutorial ;-)

Comment by Asvin Balloo — April 28, 2008 #
@Christian/Eric, Arther and Eric are spot on as far as my intent — illustrate the evolution of JavaScript methods with a simple example that shows the benefits of unobtrusive techniques. Hopefully this example will be made obsolete as IE 6’s browser market share falls.

Comment by Chad — April 29, 2008 #
Chad has got it right. YUI is the best but the real pudding is when we don’t need external libraries at all.

Comment by Dylan — April 29, 2008 #
[...] YUI has yet another nice writeup on unobtrusive rollovers. [...]

Pingback by Rollovers using the Motionbox EventHandler at Topper’s Blog — April 30, 2008 #
Hello Guys:

The Lighter Plugin does the same thing, but with the different that you don’t need to add the listener manually for the mouseover/out, in fact there is not listeners at all, because the bubbling library does the control of the mouse movement at the highest level (document.body).
http://www.bubbling-library.com/sandbox/misc/yui-rollover.html

You just need to create the correct html markup and CSS rules. Also you can include the lighter plugin on demand, and everything should works.

Best Regards,
Caridy

Comment by Caridy Patino — April 30, 2008 #
Based on a few comments, I’ve written a companion post which illustrates how to improve the performance and scalability of the original rollover example.

Comment by Chad Kieffer — May 1, 2008 #

Yahoo! User Interface Blog (YUIBlog)