EchoDitto Labs - javascript - Comments

I don't know -- I'd say that

Tom — Wed, 13 Feb 2008 14:17:04 -0800

I don't know -- I'd say that a CSS rollover should be the preferred option. For one thing, it'll degrade gracefully in the face of a partial JS implementation (my old T-Mobile Sidekick comes to mind). For another, it'll typically take less bandwidth to do the CSS rollover (if you're using a JS framework, anyway). For a third, you typically attach JS events after the DOM finishes loading -- CSS will work during page load. And finally, you have to jump through some hoops to preload images (prior to rolling over) if you do it with Javascript. With CSS there's no need.

The only downside to the approach Meaghan outlined is that it only works for rollovers with solid colors. But there's a variation I've seen some of our design partners deliver that gets around this limitation.

First, define a hyperlink with a fixed height and width. Give it a background image that's twice the height it needs to be: the top is the normal view, the bottom is the rollover. Then set the hyperlink's :hover pseudoclass to add "background-position: -20px 0;" to the element's styles when the mouse is over it (for a button that's 20 pixels high, of course -- in this case the bg image would be 40px tall).

The bonus to this approach is that if the image is loaded at all, so is the rollover. The downside is that it relies on a background image for conveying meaning, which can potentially be less 508 compliant than an image with an appropriately-defined alt tag. As a workaround I suggest giving the hyperlink the "overflow:hidden" style and a large enough padding-top value that the link's text will be safely pushed out of the viewable area (and hidden by the overflow setting). That should be easily spiderable/screen-read and not interfere with your rollover's appearance.

Not a bad workaround! But

Ben — Wed, 13 Feb 2008 05:29:34 -0800

Not a bad workaround! But really, why not just learn JQuery? It's super-easy, esp. if you already have a handle on CSS.

FDSAGSDF DFHSGF DFHGFH

Anonymous — Wed, 05 Dec 2007 23:29:09 -0800

FDSAGSDF DFHSGF DFHGFH RTSHDDT RSTHRSHR RSTHRS SRTH

Thanks for the tip, Joshua.

Tom — Thu, 20 Sep 2007 07:39:13 -0700

Thanks for the tip, Joshua. I have to confess that I haven't had a need for fancy UI effects since my jQuery conversion. But the UI plugin certainly looks impressive -- it's nice to know I won't have to go crawling back to scriptaculous if a client insists on drag-n-drop.

If you've used the Interface

JoshuaIsaac — Wed, 19 Sep 2007 20:50:12 -0700

If you've used the Interface plugin for jQuery, and are excited about the new jQuery 1.2, as I am, you should also check out jQuery UI. This was released on Sunday, less than a week after 1.2 was released. Check it out at http://ui.jquery.com/.