Javascript menu not working on netscape & other browsers

I am facing a very peculiar problem.
The following javascript renders the menu on my site. The menu is a little complicated. Here goes

Dropdown.js
===========================================================
<!--

      function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {
      if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
      document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;
      }}

      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)       location.reload();
      }
      MM_reloadPage(true);
      
      function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
      }
      
      function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
      var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
      if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
      }
      
      function MM_findObj(n, d) { //v4.0
      var p,i,x;  if(!d) d=document;
      if((p=n.indexOf("?"))>0&&parent.frames.length) {
      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && document.getElementById) x=document.getElementById(n); return x;
      }
      
      function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;                   for(i=0;i<(a.length-2);i+=3)
      if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
      if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
      }
      
      function MM_showHideLayers() {
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3)
      if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
      if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

      obj.visibility=v; }
      }

       function positionLayers() {
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3)

      if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
            if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

      obj.visibility=v; }
        }

      function newPopup(theURL,winName,features) {
            window.open(theURL,winName,features);
      }
      

      function getAnchorPosition(anchorname) {

      var useWindow = false;
      var coordinates = new Object();
      var x=0;
      var y=0;
      // Browser capability sniffing
      var use_gebi = false;
      var use_css = false;
      var use_layers = false;
      if (document.getElementById) { use_gebi = true; }
      if (document.all) { use_css = true; }
      if (document.layers) { use_layers = true; }
      // Logic to find position
       if (use_gebi && document.all) {
            x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
            y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
            }
      else if (use_gebi) {
            var o = document.getElementById(anchorname);
            x = o.offsetLeft;
            y = o.offsetTop;
            }
       else if (use_css) {
            x = AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
            y = AnchorPosition_getPageOffsetTop(document.all[anchorname]);
            }
      else if (use_layers) {
            var found=0;
            for (var i=0; i<document.anchors.length; i++) {
                  if (document.anchors[i].name == anchorname) {
                        found=1;
                        break;
                        }
                  }
            if (found == 0) {
                  coordinates.x=0; coordinates.y=0; return coordinates;
                  }
            x = document.anchors[i].x;
            y = document.anchors[i].y;
            }
      else {
            coordinates.x=0; coordinates.y=0; return coordinates;
            }
      coordinates.x = x;
      coordinates.y = y;
      return coordinates;
      }


      function AnchorPosition_getPageOffsetLeft (el) {
      var ol = el.offsetLeft;
      while ((el = el.offsetParent) != null) {
            ol += el.offsetLeft;
            }
      return ol;
      }

      function AnchorPosition_getWindowOffsetLeft (el) {
      var scrollamount = document.body.scrollLeft;
      return AnchorPosition_getPageOffsetLeft(el)-scrollamount;
      }      

      function AnchorPosition_getPageOffsetTop (el) {
      var ot = el.offsetTop;
      while((el = el.offsetParent) != null) {
            ot += el.offsetTop;
            }
      return ot;
      }

      function AnchorPosition_getWindowOffsetTop (el) {
      var scrollamount = document.body.scrollTop;
      return AnchorPosition_getPageOffsetTop(el)-scrollamount;
      }

      function MS_getX(aname) {
      position = getAnchorPosition(aname);
        if(document.layers) {
        return('left: ' + ( position.x - 146) + 'px;');
      } else {
        return('right: 0px;');
    }
}


      function MS_getY(aname) {
        position = getAnchorPosition(aname)
        return('top : ' + position.y + 'px;');
      }

      function MS_printDiv(aname, divname) {
      document.write('<div id="' + divname + '" name="' + divname + '" style="position:       absolute; ' + MS_getY(aname) + ' ' + MS_getX(aname)+ ' visibility: hidden;">');
      }

            var currentMenu = null;
            function hideCurrentMenu() {
                  if (currentMenu == null) {
                        return;
                  }      
                  MM_showHideLayers(currentMenu,'','hide');
            }
            
            function showMenu(menu_ID) {
                  pos = getAnchorPosition(menu_ID + "ref");
                  if (document.layers) {
                        document.layers[menu_ID].left = pos.x;
                  }  else {
                        eval (menu_ID + ".style.left = " + pos.x);
                  }
                  if ((currentMenu != null) && (currentMenu !=  menu_ID)) {
                        hideCurrentMenu();
                  }
                  currentMenu = menu_ID;
                  MM_showHideLayers(currentMenu,'','show');
            }
            
            if (document.layers) {
                  document.captureEvents(Event.MOUSEDOWN);
                  document.onmousedown = hideCurrentMenu;
            }

// -->
===========================================================

The menu items are ccreated in the following way

===========================================================
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="190"><img src="nav/spacer_nav.gif" width="190" height="26"></td>
    <td width="560">
      <div> <a href="http://www.dummy.com" onMouseOver="MM_swapImage('img1a','','nav/b_home1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="nav/b_home0.gif" width="72" height="26" border="0" name="img1a" onClick="showMenu('menu0');  document.img1a.style.width='0px';  document.img1a.style.height='0px';  document.img1b.style.width='72px';  document.img1b.style.height='26px'; document.img2a.style.width='123px';  document.img2a.style.height='26px';  document.img2b.style.width='0px';  document.img2b.style.height='0px'; document.img3a.style.width='140px';  document.img3a.style.height='26px';  document.img3b.style.width='0px';  document.img3b.style.height='0px'; document.img4a.style.width='145px';  document.img4a.style.height='26px';  document.img4b.style.width='0px';  document.img4b.style.height='0px'; document.img5a.style.width='55px';  document.img5a.style.height='26px';  document.img5b.style.width='0px';  document.img5b.style.height='0px';"></a><img src="nav/b_home2.gif" width="72" height="26" border="0" name="img1b" style="width:0px; height:0px"><a href="javascript:void(0);" onMouseOver="MM_swapImage('img2a','','nav/b_facility1.gif',1);" onMouseOut="MM_swapImgRestore()"><img src="nav/b_facility0.gif" width="123" height="26" border="0" name="img2a" onClick="showMenu('menu1'); document.img1a.style.width='72px';  document.img1a.style.height='26px';  document.img1b.style.width='0px';  document.img1b.style.height='0px';  document.img2a.style.width='0px';  document.img2a.style.height='0px';  document.img2b.style.width='123px';  document.img2b.style.height='26px'; document.img3a.style.width='140px';  document.img3a.style.height='26px';  document.img3b.style.width='0px';  document.img3b.style.height='0px'; document.img4a.style.width='145px';  document.img4a.style.height='26px';  document.img4b.style.width='0px';  document.img4b.style.height='0px'; document.img5a.style.width='55px';  document.img5a.style.height='26px';  document.img5b.style.width='0px';  document.img5b.style.height='0px';"></a><img src="nav/b_facility2.gif" width="123" height="26" border="0" name="img2b" style="width:0px; height:0px"><a href="javascript:void(0);" onMouseOver="MM_swapImage('img3a','','nav/b_meeting1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="nav/b_meeting0.gif" width="140" height="26" border="0" name="img3a" onClick="showMenu('menu2'); document.img1a.style.width='72px';  document.img1a.style.height='26px';  document.img1b.style.width='0px';  document.img1b.style.height='0px';  document.img2a.style.width='123px';  document.img2a.style.height='26px';  document.img2b.style.width='0px';  document.img2b.style.height='0px'; document.img3a.style.width='0px';  document.img3a.style.height='0px';  document.img3b.style.width='140px';  document.img3b.style.height='26px'; document.img4a.style.width='145px';  document.img4a.style.height='26px';  document.img4b.style.width='0px';  document.img4b.style.height='0px'; document.img5a.style.width='55px';  document.img5a.style.height='26px';  document.img5b.style.width='0px';  document.img5b.style.height='0px';"></a><img src="nav/b_meeting2.gif" width="140" height="26" border="0" name="img3b" style="width:0px; height:0px"><a href="javascript:void(0);" onMouseOver="MM_swapImage('img4a','','nav/b_operators1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="nav/b_operators0.gif" width="145" height="26" border="0" name="img4a" onClick="showMenu('menu3'); document.img1a.style.width='72px';  document.img1a.style.height='26px';  document.img1b.style.width='0px';  document.img1b.style.height='0px'; document.img2a.style.width='123px';  document.img2a.style.height='26px';  document.img2b.style.width='0px';  document.img2b.style.height='0px'; document.img3a.style.width='140px';  document.img3a.style.height='26px';  document.img3b.style.width='0px';  document.img3b.style.height='0px'; document.img4a.style.width='0px';  document.img4a.style.height='0px';  document.img4b.style.width='145px';  document.img4b.style.height='26px'; document.img5a.style.width='55px';  document.img5a.style.height='26px';  document.img5b.style.width='0px';  document.img5b.style.height='0px';"></a><img src="nav/b_operators2.gif" width="145" height="26" border="0" name="img4b" style="width:0px; height:0px"><a href="javascript:void(0);" onMouseOver="MM_swapImage('img5a','','nav/b_faq1.gif',1);" onMouseOut="MM_swapImgRestore()"><img src="nav/b_faq0.gif" width="55" height="26" border="0" name="img5a" onClick="showMenu('menu4'); document.img1a.style.width='72px';  document.img1a.style.height='26px';  document.img1b.style.width='0px';  document.img1b.style.height='0px'; document.img2a.style.width='123px';  document.img2a.style.height='26px';  document.img2b.style.width='0px';  document.img2b.style.height='0px'; document.img3a.style.width='140px';  document.img3a.style.height='26px';  document.img3b.style.width='0px';  document.img3b.style.height='0px'; document.img4a.style.width='145px';  document.img4a.style.height='26px';  document.img4b.style.width='0px';  document.img4b.style.height='0px'; document.img5a.style.width='0px';  document.img5a.style.height='0px';  document.img5b.style.width='55px';  document.img5b.style.height='26px';"></a><img src="nav/b_faq2.gif" width="55" height="26" border="0" name="img5b" style="width:0px; height:0px"></div>
    </td>
  </tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10" height="40">&nbsp;</td><td width="180" height="40" valign="top">&nbsp;</td><td><a name="menu0ref" id="menu0ref"></a><a name="menu1ref" id="menu1ref"></a><a name="menu2ref" id="menu2ref"></a><a name="menu3ref" id="menu3ref"></a><a name="menu4ref" id="menu4ref"></a><a href="#" onMouseOver="showMenu('menu2')"><img src="nav/spacer.gif" border="0" width="1" height="1"></a>
<div id="menu0" style="position:absolute; left:40; top:114; visibility: hidden" onMouseOver="showMenu('menu0');">
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="165"><img name="group_reservations1" border="0" src="nav/group_reservations1.gif" width="165" height="30"></td><td width="175"><a href="http://www.dummy.ws/reservations/index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('indiv_reservations1','','nav/indiv_reservations1.gif',1)"><img name="indiv_reservations1" border="0" src="nav/indiv_reservations0.gif" alt="Find a facility for your meeting or group event" width="175" height="30"></a></td><td width="220" gcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</div>
<div id="menu1" style="position:absolute; left:40; top:114; visibility: hidden" onMouseOver="showMenu('menu1');">
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="149"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('adv_search','','nav/adv_search1.gif',1)"><img name="adv_search" border="0" src="nav/adv_search0.gif" alt="Find a facility for your meeting or group event" width="149" height="30"></a></td><td width="103"><a href="http://www.dummy.com/do/dummy?action=map_search" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('map_search','','nav/map_search1.gif',1)"><img name="map_search" border="0" src="nav/map_search0.gif" alt="Find a facility for your meeting or group event" width="103" height="30"></a></td><td width="112"><a href="http://www.dummy.com/do/dummy?action=quick_search" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('quick_search','','nav/quick_search1.gif',1)"><img name="quick_search" border="0" src="nav/quick_search0.gif" alt="Find a facility for your meeting or group event" width="112" height="30"></a></td><td width="196" bgcolor="#FFFFFF">&nbsp;</td>
</tr>
</table>
</div>

<div id="menu2" style="position:absolute; left:151px; top:114px; visibility: hidden" onMouseOver="showMenu('menu2');">
<table width="559" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="61"><a href="http://www.dummy.com/do/dummy?action=meeting_planners" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info1','','nav/info1.gif',1)"><img name="info1" border="0" src="nav/info0.gif" width="61" height="30" alt="Info"></a></td><td width="143"><a href="http://www.dummy.com/do/dummy?action=planner_account" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('plan_acc','','nav/plan_acc1.gif',1)"><img name="plan_acc" border="0" src="nav/plan_acc0.gif" alt="Your FREE Planner Account" width="143" height="30"></a></td><td width="101"><a href="http://www.dummy.com/do/dummy?action=create_rfp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('create_rfp','','nav/create_rfp1.gif',1)"><img name="create_rfp" border="0" src="nav/create_rfp0.gif" alt="Create RFP (Request For Proposal)" width="101" height="30"></a></td><td width="85"><a href="http://www.dummy.com/do/dummy?action=my_rfps" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('my_rfps','','nav/my_rfps1.gif',1)"><img name="my_rfps" border="0" src="nav/my_rfps0.gif" alt="My RFPs" width="85" height="30"></a></td><td width="76"><a href="http://www.dummy.com/do/dummy?action=sign_up" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('register','','nav/register1.gif',1)"><img name="register" border="0" src="nav/register0.gif" alt="Register For Free" width="76" height="30"></a></td><td width="63"><a href="http://www.dummy.com/do/dummy?action=demo_mp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('demo','','nav/demo1.gif',1)"><img name="demo" border="0" src="nav/demo0.gif" alt="Dummy Demo" width="64" height="30"></a></td><td width="30">&nbsp;</td>
</tr>
</table>
</div>
<div id="menu3" style="position:absolute; left:150; top:114; visibility: hidden" onMouseOver="showMenu('menu3');">
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="61"><a href="http://www.dummy.com/do/dummy?action=facility_operators" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('info','','nav/info1.gif',1)"><img name="info" border="0" src="nav/info0.gif" width="61" height="30" alt="Info"></a></td><td width="139"><a href="http://www.dummy.com/do/dummy?action=facility_account" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('fac_acc','','nav/facility_acc1.gif',1)"><img name="fac_acc" border="0" src="nav/facility_acc0.gif" alt="Your Facility Account" width="139" height="30"></a></td><td width="97"><a href="http://www.dummy.com/do/dummy?action=add_listing" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('add_listing','','nav/add_listing1.gif',1)"><img name="add_listing" border="0" src="nav/add_listing0.gif" alt="Add Your Listing" width="97" height="30"></a></td><td width="120"><a href="http://www.dummy.com/do/dummy?action=update_listing_main" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('upd_listing','','nav/upd_listing1.gif',1)"><img name="upd_listing" border="0" src="nav/upd_listing0.gif" alt="Update Your Listing" width="120" height="30"></a></td><td width="61"><a href="http://www.dummy.com/do/dummy?action=help_me_choose" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('help','','nav/help1.gif',1)"><img name="help" border="0" src="nav/help0.gif" alt="Help" width="61" height="30"></a></td><td width="64"><a href="http://www.dummy.com/do/dummy?action=demo_fo" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('demo2','','nav/demo1.gif',1)"><img name="demo2" border="0" src="nav/demo0.gif" alt="Dummy Demo" width="64" height="30"></a></td><td width="18">&nbsp;</td>
</tr>
</table>
</div>
<div id="menu4" style="position:absolute; left:150px; top:114px; visibility: hidden" onMouseOver="showMenu('menu4');">
<table width="560" border="0" cellspacing="0" cellpadding="0"><tr><td width="173"><a href="http://www.dummy.com/do/dummy?action=faq_meeting_planners" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('faq_meeting','','nav/faq_meeting1.gif',1)"><img name="faq_meeting" border="0" src="nav/faq_meeting0.gif" alt="FAQ Meeting Planners" width="173" height="30"></a></td><td width="165"><a href="http://www.dummy.com/do/dummy?action=faq_facility_operators" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('faq_facility','','nav/faq_facility1.gif',1)"><img name="faq_facility" border="0" src="nav/faq_facility0.gif" alt="FAQ Facility Operators" width="165" height="30"></a></td><td width="222"><a href="http://www.dummy.com/do/dummy?action=faq_individual_reservations" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('faq_individual','','nav/faq_individual1.gif',1)"><img name="faq_individual" border="0" src="nav/faq_individual0.gif" alt="FAQ Individual Reservations" width="222" height="30"></a></td></tr></table>
</div>

</td>
</tr>
</table>
=====================================================
The javascript renders the menu correctly in internet explorer but fails to display the submenu’s in netscape & other browser.
What’s wrong with the code? And why is there this compatibility issue?

Any help will be appreciated. Thanks.
belmailAsked:
Who is Participating?
 
belmailAuthor Commented:
Okay I have found the solution. Took a bit of time & looking around but I have finally made the menu system browser compatible.
Here are a few pointers which came in handy while I was trying to fix this darn menu.

1. Try avoiding inline javascripts which make document style changes.
onClick="showMenu('menu0');  document.img1a.style.width='0px';  document.img1a.style.height='0px';  document.img1b.style.width='72px';............

I REMOVED THESE AND I PUT THEM IN A SEPARATE FUNCTION.

2. You need to SNIFF THE browser
USING IF STATEMENTS LIKE THIS
    if (use_gebi && document.all) {
      <!-- STATEMENTS COMPATIBLE TO ie-->
          }
     else if (use_gebi) {
      <!-- STATEMENTS COMPATIBLE TO NETSCAPE-->
          }

3. TRY AVOIDING INLINE scripts which make document.style changes [THESE NEED TO BE BROWSER SNIFFED AND THE CHANGES MADE ACCORDINGLY]
If netscape
DOCUMENT.GETELEMENTBYIF['objectname'].style. whatever
If IE
DOCUMENT.STYLE.WHATEVER
Thanks for all the help though.
Best Regards.
Question is closed.
0
 
Asta CuTechnical consultant & graphic designCommented:
Curious about Versions and browser specifics; and which Plugins called/installed.
0
 
belmailAuthor Commented:
I am not sure. But this should be browser friendly or else users won't be able to use the links.
The thing is that it works fine on internet explorer. But on netscape the links don't work, and the submenu's don't show.
I guess it has something to do with the onclick() event. But I can't figure out what.
Thanks
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Asta CuTechnical consultant & graphic designCommented:
Others better versed in this will likely step in to give you specific guidance; in the interim, this may help regarding Netscape and event handlers:
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/handlers.html

This gives you some insight into Browser types and versions in terms of what is supported/compatible:
http://hotwired.lycos.com/webmonkey/reference/browser_chart/

Validators -> http://webdesign.about.com/cs/htmlvalidators/index.htm?once=true&

0
 
belmailAuthor Commented:
Thanks for those links. But they do not really check the javascript.
I am still wondering why this won't work on netscape/opera.
The code seems fine.
Thanks anyway.
0
 
belmailAuthor Commented:
The problem seems to be with the onclick event which is not calling the showmenu() function.
I am not sure but it may be because of the inline style change statements.
Any ideas?
0
 
Asta CuTechnical consultant & graphic designCommented:
Hopefully another expert better versed in this can add the solution for you; and have sent a request.
0
 
Asta CuTechnical consultant & graphic designCommented:
Great, just ask for a PAQ and Refund from the Community Support topic area.  Thanks for posting the solution as well, perhaps it'll help someone else with similar roadblock in the future.
Asta
0
 
belmailAuthor Commented:
I am unable to redeem the points for this question. Is there any way to do that?
0
 
Asta CuTechnical consultant & graphic designCommented:
Thank you very much, COBOLdinosaur, you're great!  ":0) Asta
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.