We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Javascript menu not working on netscape & other browsers

belmail
belmail asked
on
Medium Priority
510 Views
Last Modified: 2008-03-10
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.
Comment
Watch Question

Asta CuTechnical consultant & graphic design
CERTIFIED EXPERT
Top Expert 2004

Commented:
Curious about Versions and browser specifics; and which Plugins called/installed.

Author

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
Asta CuTechnical consultant & graphic design
CERTIFIED EXPERT
Top Expert 2004

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

Author

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.

Author

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?
Asta CuTechnical consultant & graphic design
CERTIFIED EXPERT
Top Expert 2004

Commented:
Hopefully another expert better versed in this can add the solution for you; and have sent a request.
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Asta CuTechnical consultant & graphic design
CERTIFIED EXPERT
Top Expert 2004

Commented:
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

Author

Commented:
I am unable to redeem the points for this question. Is there any way to do that?
Asta CuTechnical consultant & graphic design
CERTIFIED EXPERT
Top Expert 2004

Commented:
Thank you very much, COBOLdinosaur, you're great!  ":0) Asta
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.