jQuery UI and Scriptaculous

We use Scriptaculous at my day job, so we’re pretty excited about Scripty 2‘s release. We chose Prototype and Scriptaculous because, at the time, they had the best options for visual effects, and arguably Scripty still does, especially with version 2. Still, I’ve been curious about jQuery UI, which was still nascent at the time we picked a library, and has come a long ways since.

Recently I was thinking about the jousting minigame from the classic 1986 video game Defender of the Crown, because I’m that kind of nerd, and realized that I could probably do a decent simulacrum of it nowadays with DHTML. Well, with DHTML and a decent effects library. So I decided to use this as an excuse to play around with jQuery UI and kill two birds with one stone.

The result isn’t finished yet; I’ve got the basics down, but still need to fine-tune the effects and transitions and add a lot of chrome. But I’ve been pleasantly surprised at the positive transfer between jQuery UI and Scriptaculous. This shouldn’t be a surprise, really, since the two libraries are cousins, each learning from and copying the other to their mutual benefit, and they frequently have similar syntax. Moreover, their lists of basic effects are pleasantly similar.

There’s been some negative transfer as well; Prototype’s $ function, for instance, extends the native DOM object that it returns – while jQuery’s $ function only provides jQuery features, meaning that you can’t use methods like innerHTML(). (Not that you should often have to, given jQuery’s html() method, but still, this threw me off.)

Frustrating, though, has been the discovery of how often I get an animation working great in Firefox, only to watch it fail horrendously in IE7. One of the big advantages of using a library is to let the library take care of browser differences (e.g. CSS opacity) for you, and it’s always disappointing when the library doesn’t carry through. (Not, mind you, that I lay the fault here at the feet of jQuery, since I’ve run into the same problems with Prototype/Scripty.) One animation read in the background color value of an element whose CSS class explicitly defined a color; Firefox returned the correct value, while IE insisted its value was “rgb(0, 0, 0)”. Thanks, IE.

Leave a Reply