![]() |
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA |
|
![]() |
![]()
In Chapter 6 ("Too Many Browsers? Not Really") of Designing with JavaScript, 2nd Edition, we explore various techniques for dealing with browser incompatibilities by using browser detection. We can serve different CSS stylesheets to each browser, contain incompatible DHTML in a single frame, or just check if an object is supported. In this article, adapted from Chapter 11 ("Advanced Applications") of the book, I extend the capabilities of older browsers instead, by recreating crucial W3C DOM features like the Yes, it seems like you'd need a magical incantation to make all dynamic styles compatible across all browsers, but it is possible. Like all magic, this piece of JavaScript trickery relies on misdirection. By reconstructing DOM features out of each browser's proprietary DHTML extensions, and tying them to common names, this example creates another naming convention different from either the 4.0 browsers' or the W3C's, which you can then use to write browser-independent code. This example applies the excellent work done by Bob Clary for Netscape, called xbStyle. You can find the latest version of xbStyle, as well as more information on cross-browser scripting, at DevEdge. Application Programming InterfacesxbStyle falls into a curious category of scripts called APIs (Application Programming Interface). An API doesn't give a piece of software many new capabilities, as do most scripts, but rather creates an interface through which you can make better use of the software in your own scripts. You could say that the DOM is an API for scripting HTML. For example, the DOM doesn't invent new HTML elements, but it does let you manipulate those elements that already exist in ways JavaScript can't. xbStyle is an API for Internet Explorer 4, Netscape 4, and W3C style manipulation, giving you access to dynamic CSS styles across all three browsers through one convenient interface. This means that, rather than branching your code to work around incompatibilities, or creating three versions of your scripts altogether, you can write one script using xbStyle that will work the same across all browsers.
In this example, we'll be taking the sliding menus script from Chapter 10 ("Interactive DHTML Techniques") of Designing with JavaScript, and rewriting it to use xbStyle. The original script uses the W3C DOM to slide a layer across the screen, then snaps it back into place when finished. This version follows the same logic as the original, but changes the names to fit xbStyle's conventions. In order to use xbStyle, you must first link the
xbStyle also makes use of the Ultimate Browser Sniffer, another JavaScript library from Bob Clary. You'll have to link that file to your document as well:
Once you've linked your document to the Ultimate Browser Sniffer, you can start writing your script using the API. Using XBStyleFirst, here is the original sliding menu script, outside of its HTML context:
This script uses common features of the DOM, including
![]() ![]() |
![]() |
![]()
![]() |
![]() |
||||||||
|