• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 479
  • Last Modified:

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.
0
belmail
Asked:
belmail
  • 5
  • 5
1 Solution
 
Asta CuCommented:
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
 
Asta CuCommented:
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
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

 
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 CuCommented:
Hopefully another expert better versed in this can add the solution for you; and have sent a request.
0
 
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 CuCommented:
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 CuCommented:
Thank you very much, COBOLdinosaur, you're great!  ":0) Asta
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now