Link to home
Start Free TrialLog in
Avatar of belmail
belmail

asked on

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.
Avatar of Asta Cu
Asta Cu
Flag of United States of America image

Curious about Versions and browser specifics; and which Plugins called/installed.
Avatar of belmail
belmail

ASKER

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
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&

Avatar of belmail

ASKER

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.
Avatar of belmail

ASKER

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?
Hopefully another expert better versed in this can add the solution for you; and have sent a request.
ASKER CERTIFIED SOLUTION
Avatar of belmail
belmail

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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
Avatar of belmail

ASKER

I am unable to redeem the points for this question. Is there any way to do that?
Thank you very much, COBOLdinosaur, you're great!  ":0) Asta