Pablo Averbuj

Yahoo UI Libraries

I’ve been a little reluctant to jump onto this newfangled DHTML/Ajax bandwagon. Sure it sounds fancy and looks nice, but you can’t fool me. I used to write web applications and making things look the same in IE and Netscape was hellish. After playing with the Yahoo UI Libraries, I have an update. The bad news: It’s almost but not entirely like before, it can still be painful. The good news: The UI libraries are very good, and they help a bit.

By this point, I’ve probably spent somewhere around 20 hours playing with the Yahoo stuff. I’ve had a lot of problems with making things happy in both IE and Mozilla/Firefox, none of which are Yahoo’s fault. I was able to make a fancy floating navigation bar that can be dragged to either the left or the right side of the screen; it can be hidden (and hides differently depending on which side); the user can pick between two levels of opacity; it remembers what side you left it on, whether you left it showing, and what zipcode you entered into the weather search. All this required me to write about 300 lines of javascript, and spend much more time with IE than I am accustomed.

Here are the bugs that consumed the greatest amount of my time:
1: the way that YAHOO.util.Dom.getClientWidth() works, IE returns a width that includes the vertical scrollbar, this making my navbar appear about 20px too far to the right (and making the horizontal scroll bar appear). Solution: I added document.body.clientWidth to the set of attributes explored.

2: Mozilla/Firefox has a bug with opacity = 1 that makes the element blink. Solution: I set my maximum opacity to 0.98 instead of 1. This is really an absurd bug.

There were more CSS incompatibilities that drove me really nuts. The state of browser compatibility is *better* but not entirely resolved. The Yahoo UI libraries and design patterns are excellent, I highly recommend them.