Home ] Up ] Andis BallMenu - Physics ] [ BallMenu - Javascript ]

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() and hide() - 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.

 

Notice about my JavaScript Code: You are free to use the cross-browser specific part of my code in browserspecific.js. If you want to use the JavaScript physics engine ballnavigation.js or the menu-preparation-module menupreparation.js, I kindly ask you to notify me and put a link on your web-page pointing to this web-site (strange.itp.tuwien.ac.at/~ipp).
 

 

 
 

 Home ] Up ] Andis BallMenu - Physics ] [ BallMenu - Javascript ]
© 2002, Andreas Ipp