Comments on: Unobtrusive Rollovers Using YUI

By: Chad Kieffer

Chad Kieffer — Fri, 02 May 2008 01:09:30 +0000

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.

By: Caridy Patino

Caridy Patino — Wed, 30 Apr 2008 23:55:16 +0000

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

By: Rollovers using the Motionbox EventHandler at Topper’s Blog

Rollovers using the Motionbox EventHandler at Topper’s Blog — Wed, 30 Apr 2008 21:15:49 +0000

[...] YUI has yet another nice writeup on unobtrusive rollovers. [...]

By: Dylan

Dylan — Wed, 30 Apr 2008 01:18:24 +0000

Chad has got it right. YUI is the best but the real pudding is when we don’t need external libraries at all.

By: Chad

Chad — Tue, 29 Apr 2008 16:45:14 +0000

@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.

By: Asvin Balloo

Asvin Balloo — Tue, 29 Apr 2008 05:33:54 +0000

About 2 weeks ago, orange.mu was launched, where we use more or less the same thing, with roll over menus. Nice tutorial ;-)

By: Eric Miraglia

Eric Miraglia — Tue, 29 Apr 2008 03:17:40 +0000

@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

By: Arthur M

Arthur M — Tue, 29 Apr 2008 03:06:01 +0000

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.

By: Eric Ferraiuolo

Eric Ferraiuolo — Tue, 29 Apr 2008 03:04:33 +0000

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?

By: Christian Decker

Christian Decker — Tue, 29 Apr 2008 01:48:25 +0000

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.