DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum IX (v3.09) | 4 | WebReference

DHTML Lab - dhtmlab.com - Hierarchical Menus Ver. 3 - Addendum IX (v3.09) | 4

Logo

Hierarchical Menus Ver. 3 - Addendum IX (v3.09)
enabling menus for IE5 Macintosh


Version 3.x of HM has been developed with one code base for both IE4 and IE5 for Windows. On the Windows platform, IE has had a linear development. Code written for IE4 will invariably work in IE5 with minor or no modifications. Version 4 of HM will have different code bases to take advantage of some of the expanded features of IE5 Windows.

Internet Explorer has not developed linearly on the Macintosh platform. IE5Mac should be regarded as a completely new browser, closer to IE5 for Windows than to IE4 for Macintosh. As such, it excels in new up-to-date features, such as DOM support, but lacks complete continuity with old IE4 DHTML.

This means that code written for IE5Win will work well in IE5Mac, but IE4Win code may not. Many of you have discovered this when attempting to adapt HM for IE5Mac. It will not work without some modifications. For Version 3.09, we decided to make the minimum amount of changes to the existing script. We did not step back to see the big picture and change philosophy to accomodate IE5Mac. This elegant approach, as mentioned, we left for Version 4.

For Version 3.09, we used the tweak-as-we-go approach. We tried to execute the script and fixed problems as they arose. We'll use the same method for this article.

Browser Detection

First off, we have to modify our browser detection variables to allow access to the script for IE5Mac. Our old browser-detection looked like this:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
     NS4 = (document.layers);
     IE4 = (document.all);
    ver4 = (NS4 || IE4);   
   isMac = (navigator.appVersion.indexOf("Mac") != -1);
  isMenu = (NS4 || (IE4 && !isMac));
function popUp(){return};
function popDown(){return};
if (!ver4) event=null;
//-->
</SCRIPT>

Since we already have a Macintosh-detection variable, we only need a version 5 variable:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
     NS4 = (document.layers);
     IE4 = (document.all);
    ver4 = (NS4 || IE4);
     IE5 = (IE4 && navigator.appVersion.indexOf("5.")!=-1);
   isMac = (navigator.appVersion.indexOf("Mac") != -1);
  isMenu = (NS4 || (IE4 && !isMac) || (IE5 && isMac));
function popUp(){return};
function popDown(){return};
if (!ver4) event=null;
//-->
</SCRIPT>

The isMenu variable, true when the browser is menu-enabled, now stores a true value when the browser used is:

Don't forget that the IE4 variable refers to Explorer 4 and higher.

With the above change, the external HM script should now execute. The page you are reading has two menus, activated by passing your mouse over the links below. Display them. If you are using IE5 Mac, the results may be surprising.

Menu Example 1:

Menu Example 2:

The table below contains screenshots of the menus as they appeared in IE for Windows (and of course, Navigator on all platforms) and IE for Macintosh.

 
Menu 1
Menu 2

No visible menu items, bad sizing, bad colors. What's going on? And the last defined menu (the second one) is not sized vertically at all.

Already, we have to make our first modification to the external hierMenus.js script.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: June 16, 2000
Revised: June 16, 2000

URL: http://www.webreference.com/dhtml/column21/addendum9/2.html