Andis BallMenuTM
Cross Browser JavaScript
Why JavaScript?
Compared
to HTML, JavaScript is a powerful programming language, allowing everything a
programmer wishes for. First introduced by Netscape, it soon became a classic
with status bar tickers and other knickknacks. Only recently computers became
powerful enough to allow for rich graphical applications like Andis BallMenu
to be developed in JavaScript. The combination of JavaScript and DHTML (Dynamic-HTML)
proves to be a serious competitor for
Sun's Java or
Macromedia's Flash in web browser
applications.
Cross-browser JavaScript
Unfortunately,
programming in JavaScript is not straight-forward because of different DHTML
implementations by various browser vendors. Therefore a lot of programming is
first invested into making browser-dependent routines transparent for the actual
application. Today, a lot of tools are available for crossbrowser JavaScript
development. I chose the Alladyn DHTML
solution because of its small code-size and fastness. Since Alladyn is a
cross-browser solution for placing graphical objects on the screen, additional
routines were necessary for mouse interaction and window properties.
The crossbrowser routines developed for Andis BallMenu include
posquick()- finds current mouse position,show()andhide()- shows and hides graphical objects,getWinSize()- gets current size of the hypertext content area,getObjSize()- retrieves position and size of a DIV object,
These functions can be found in browserspecific.js.
It is especially tricky to retrieve the content area: For Netscape and
Mozilla this property is retrieved by document.width, for Microsoft
Internet Explorer you have to use scrollWidth, in Opera you have to
use document.body.offsetWidth if you are in the Opera mode or the Mozilla mode,
but if you are in Internet Explorer mode, Opera does not understand the
scrollWidth, so we have to use document.body.clientWidth.
All this is now simply handled by the single routine getWinSize().
Concerned about speeed?
A new way of handling functions allows for generating browser-specific code with almost no overhead. Traditionally, a browser-independent function for showing an object would look like this:
//--------------------------------------------
//Show object
function show(obj) {
// general function
if (ie) {
// Internet explorer ONLY
understands "visible"
// IE will halt on
anything else...
obj.style.visibility = "visible";
}
else
{
// Netscape understands "show"
// Mozilla 0.9.9 wants "visible";
// both browsers don't
care about each other's setting
obj.style.visibility = "show";
obj.style.visibility = "visible";
}
}
A new way of handling code like this is to let the function point to another
location (see below): Now the if-construct is only called the very
first time. Here the function show() is set to point at a new
function showq1() or showq2(). At the end show()
seems to call itself, but instead already calls one of the new functions
showq1() or showq2(). All subsequent calls in the code of
show() just call the small functions defined below:
//--------------------------------------------
//Show object
function show(obj) {
// general function
if (ie) {
// Internet explorer ONLY
understands "visible"
// IE will halt on
anything else...
show = showq1;
}
else
{
// Netscape understands "show"
// Mozilla 0.9.9 wants "visible";
// both browsers don't
care about each other's setting
show = showq2;
}
show(obj);
}
function showq1(obj) {
obj.style.visibility = "visible";
}
function showq2(obj) {
obj.style.visibility = "show";
obj.style.visibility = "visible";
}
These functions can be found in browserspecific.js.
Supported browsers
So far Andis BallMenu was successfully tested under theses systems:
Windows XP:
- Microsoft Internet Explorer 6.0.26
- Netscape Navigator 6.2.3
- Netscape Navigator 4.08
- Opera 6.03
- Mozilla 1.0
Windows 2000:
- Microsoft Internet Explorer
Linux:
- Netscape Communicator 4.77
- Mozilla 0.9.9
- Opera 6.0 Technology Preview 3
- Lynx v2.8.4
Other cross-browser DHTML solutions
Andis BallMenu was developed using Alladyn. But there are other crossbrowser JavaScript solutions on the web you might want to have a look at too:
- Alladyn: Very fast and small cross-browser system.
- Cross-browser.com: Supports most browsers and is a partial implementation of some of the W3C DOM2 Core and Event interfaces. Disadvantage is its big size for beginners.
- The Dynamic Duo: Cross-Browser Support for IE and Netscape. Very good tutorial into the problems of cross-browser development.
© 2002, Andreas Ipp