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")&&(p arseInt(ap pVersion)= =4)) {
document.MM_pgW=innerWidth ; document.MM_pgH=innerHeigh t; onresize=MM_reloadPage;
}}
else if (innerWidth!=document.MM_p gW || innerHeight!=document.MM_p gH) 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.o Src;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_pre loadImages .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&&p arent.fram es.length) {
d=parent.frames[n.substrin g(p+1)].do cument; 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.len gth;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.arg uments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+= 3)
if ((x=MM_findObj(a[i]))!=nul l){documen t.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_showHide Layers.arg uments;
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_showHide Layers.arg uments;
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,fe atures) {
window.open(theURL,winName ,features) ;
}
function getAnchorPosition(anchorna me) {
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_getPageOffs etLeft(doc ument.all[ anchorname ]);
y = AnchorPosition_getPageOffs etTop(docu ment.all[a nchorname] );
}
else if (use_gebi) {
var o = document.getElementById(an chorname);
x = o.offsetLeft;
y = o.offsetTop;
}
else if (use_css) {
x = AnchorPosition_getPageOffs etLeft(doc ument.all[ anchorname ]);
y = AnchorPosition_getPageOffs etTop(docu ment.all[a nchorname] );
}
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_getPageOffs etLeft (el) {
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null) {
ol += el.offsetLeft;
}
return ol;
}
function AnchorPosition_getWindowOf fsetLeft (el) {
var scrollamount = document.body.scrollLeft;
return AnchorPosition_getPageOffs etLeft(el) -scrollamo unt;
}
function AnchorPosition_getPageOffs etTop (el) {
var ot = el.offsetTop;
while((el = el.offsetParent) != null) {
ot += el.offsetTop;
}
return ot;
}
function AnchorPosition_getWindowOf fsetTop (el) {
var scrollamount = document.body.scrollTop;
return AnchorPosition_getPageOffs etTop(el)- scrollamou nt;
}
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(currentM enu,'','hi de');
}
function showMenu(menu_ID) {
pos = getAnchorPosition(menu_ID + "ref");
if (document.layers) {
document.layers[menu_ID].l eft = pos.x;
} else {
eval (menu_ID + ".style.left = " + pos.x);
}
if ((currentMenu != null) && (currentMenu != menu_ID)) {
hideCurrentMenu();
}
currentMenu = menu_ID;
MM_showHideLayers(currentM enu,'','sh ow');
}
if (document.layers) {
document.captureEvents(Eve nt.MOUSEDO WN);
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_ho me1.gif',1 )" onMouseOut="MM_swapImgRest ore()"><im g src="nav/b_home0.gif" width="72" height="26" border="0" name="img1a" onClick="showMenu('menu0') ; document.img1a.style.width ='0px'; document.img1a.style.heigh t='0px'; document.img1b.style.width ='72px'; document.img1b.style.heigh t='26px'; document.img2a.style.width ='123px'; document.img2a.style.heigh t='26px'; document.img2b.style.width ='0px'; document.img2b.style.heigh t='0px'; document.img3a.style.width ='140px'; document.img3a.style.heigh t='26px'; document.img3b.style.width ='0px'; document.img3b.style.heigh t='0px'; document.img4a.style.width ='145px'; document.img4a.style.heigh t='26px'; document.img4b.style.width ='0px'; document.img4b.style.heigh t='0px'; document.img5a.style.width ='55px'; document.img5a.style.heigh t='26px'; document.img5b.style.width ='0px'; document.img5b.style.heigh t='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_fa cility1.gi f',1);" onMouseOut="MM_swapImgRest ore()"><im g src="nav/b_facility0.gif" width="123" height="26" border="0" name="img2a" onClick="showMenu('menu1') ; document.img1a.style.width ='72px'; document.img1a.style.heigh t='26px'; document.img1b.style.width ='0px'; document.img1b.style.heigh t='0px'; document.img2a.style.width ='0px'; document.img2a.style.heigh t='0px'; document.img2b.style.width ='123px'; document.img2b.style.heigh t='26px'; document.img3a.style.width ='140px'; document.img3a.style.heigh t='26px'; document.img3b.style.width ='0px'; document.img3b.style.heigh t='0px'; document.img4a.style.width ='145px'; document.img4a.style.heigh t='26px'; document.img4b.style.width ='0px'; document.img4b.style.heigh t='0px'; document.img5a.style.width ='55px'; document.img5a.style.heigh t='26px'; document.img5b.style.width ='0px'; document.img5b.style.heigh t='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_me eting1.gif ',1)" onMouseOut="MM_swapImgRest ore()"><im g src="nav/b_meeting0.gif" width="140" height="26" border="0" name="img3a" onClick="showMenu('menu2') ; document.img1a.style.width ='72px'; document.img1a.style.heigh t='26px'; document.img1b.style.width ='0px'; document.img1b.style.heigh t='0px'; document.img2a.style.width ='123px'; document.img2a.style.heigh t='26px'; document.img2b.style.width ='0px'; document.img2b.style.heigh t='0px'; document.img3a.style.width ='0px'; document.img3a.style.heigh t='0px'; document.img3b.style.width ='140px'; document.img3b.style.heigh t='26px'; document.img4a.style.width ='145px'; document.img4a.style.heigh t='26px'; document.img4b.style.width ='0px'; document.img4b.style.heigh t='0px'; document.img5a.style.width ='55px'; document.img5a.style.heigh t='26px'; document.img5b.style.width ='0px'; document.img5b.style.heigh t='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_op erators1.g if',1)" onMouseOut="MM_swapImgRest ore()"><im g src="nav/b_operators0.gif" width="145" height="26" border="0" name="img4a" onClick="showMenu('menu3') ; document.img1a.style.width ='72px'; document.img1a.style.heigh t='26px'; document.img1b.style.width ='0px'; document.img1b.style.heigh t='0px'; document.img2a.style.width ='123px'; document.img2a.style.heigh t='26px'; document.img2b.style.width ='0px'; document.img2b.style.heigh t='0px'; document.img3a.style.width ='140px'; document.img3a.style.heigh t='26px'; document.img3b.style.width ='0px'; document.img3b.style.heigh t='0px'; document.img4a.style.width ='0px'; document.img4a.style.heigh t='0px'; document.img4b.style.width ='145px'; document.img4b.style.heigh t='26px'; document.img5a.style.width ='55px'; document.img5a.style.heigh t='26px'; document.img5b.style.width ='0px'; document.img5b.style.heigh t='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_fa q1.gif',1) ;" onMouseOut="MM_swapImgRest ore()"><im g src="nav/b_faq0.gif" width="55" height="26" border="0" name="img5a" onClick="showMenu('menu4') ; document.img1a.style.width ='72px'; document.img1a.style.heigh t='26px'; document.img1b.style.width ='0px'; document.img1b.style.heigh t='0px'; document.img2a.style.width ='123px'; document.img2a.style.heigh t='26px'; document.img2b.style.width ='0px'; document.img2b.style.heigh t='0px'; document.img3a.style.width ='140px'; document.img3a.style.heigh t='26px'; document.img3b.style.width ='0px'; document.img3b.style.heigh t='0px'; document.img4a.style.width ='145px'; document.img4a.style.heigh t='26px'; document.img4b.style.width ='0px'; document.img4b.style.heigh t='0px'; document.img5a.style.width ='0px'; document.img5a.style.heigh t='0px'; document.img5b.style.width ='55px'; document.img5b.style.heigh t='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"> </td><td width="180" height="40" valign="top"> </td><t d><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('men u2')"><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('men u0');">
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="165"><img name="group_reservations1" border="0" src="nav/group_reservation s1.gif" width="165" height="30"></td><td width="175"><a href="http://www.dummy.ws/reservations/index.html" onMouseOut="MM_swapImgRest ore()" onMouseOver="MM_swapImage( 'indiv_res ervations1 ','','nav/ indiv_rese rvations1. gif',1)">< img name="indiv_reservations1" border="0" src="nav/indiv_reservation s0.gif" alt="Find a facility for your meeting or group event" width="175" height="30"></a></td><td width="220" gcolor="#FFFFFF"> </t d>
</tr>
</table>
</div>
<div id="menu1" style="position:absolute; left:40; top:114; visibility: hidden" onMouseOver="showMenu('men u1');">
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="149"><a href="#" onMouseOut="MM_swapImgRest ore()" onMouseOver="MM_swapImage( 'adv_searc h','','nav /adv_searc h1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'map_searc h','','nav /map_searc h1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'quick_sea rch','','n av/quick_s earch1.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"> </ td>
</tr>
</table>
</div>
<div id="menu2" style="position:absolute; left:151px; top:114px; visibility: hidden" onMouseOver="showMenu('men u2');">
<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_swapImgRest ore()" onMouseOver="MM_swapImage( 'info1','' ,'nav/info 1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'plan_acc' ,'','nav/p lan_acc1.g if',1)"><i mg 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_swapImgRest ore()" onMouseOver="MM_swapImage( 'create_rf p','','nav /create_rf p1.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_swapImgRest ore()" 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_swapImgRest ore()" onMouseOver="MM_swapImage( 'register' ,'','nav/r egister1.g if',1)"><i mg 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_swapImgRest ore()" 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"> </td>
</tr>
</table>
</div>
<div id="menu3" style="position:absolute; left:150; top:114; visibility: hidden" onMouseOver="showMenu('men u3');">
<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_swapImgRest ore()" 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_swapImgRest ore()" onMouseOver="MM_swapImage( 'fac_acc', '','nav/fa cility_acc 1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'add_listi ng','','na v/add_list ing1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'upd_listi ng','','na v/upd_list ing1.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_swapImgRest ore()" 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_swapImgRest ore()" onMouseOver="MM_swapImage( 'demo2','' ,'nav/demo 1.gif',1)" ><img name="demo2" border="0" src="nav/demo0.gif" alt="Dummy Demo" width="64" height="30"></a></td><td width="18"> </td>
</tr>
</table>
</div>
<div id="menu4" style="position:absolute; left:150px; top:114px; visibility: hidden" onMouseOver="showMenu('men u4');">
<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_swapImgRest ore()" onMouseOver="MM_swapImage( 'faq_meeti ng','','na v/faq_meet ing1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'faq_facil ity','','n av/faq_fac ility1.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_swapImgRest ore()" onMouseOver="MM_swapImage( 'faq_indiv idual','', 'nav/faq_i ndividual1 .gif',1)"> <img name="faq_individual" border="0" src="nav/faq_individual0.g if" 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.
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")&&(p
document.MM_pgW=innerWidth
}}
else if (innerWidth!=document.MM_p
}
MM_reloadPage(true);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=
}
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_pre
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&&p
d=parent.frames[n.substrin
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;
for(i=0;!x&&d.layers&&i<d.
if(!x && document.getElementById) x=document.getElementById(
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arg
if ((x=MM_findObj(a[i]))!=nul
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() {
var i,p,v,obj,args=MM_showHide
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v
obj.visibility=v; }
}
function positionLayers() {
var i,p,v,obj,args=MM_showHide
for (i=0; i<(args.length-2); i+=3)
if ((obj=MM_findObj(args[i]))
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v
obj.visibility=v; }
}
function newPopup(theURL,winName,fe
window.open(theURL,winName
}
function getAnchorPosition(anchorna
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_getPageOffs
y = AnchorPosition_getPageOffs
}
else if (use_gebi) {
var o = document.getElementById(an
x = o.offsetLeft;
y = o.offsetTop;
}
else if (use_css) {
x = AnchorPosition_getPageOffs
y = AnchorPosition_getPageOffs
}
else if (use_layers) {
var found=0;
for (var i=0; i<document.anchors.length;
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_getPageOffs
var ol = el.offsetLeft;
while ((el = el.offsetParent) != null) {
ol += el.offsetLeft;
}
return ol;
}
function AnchorPosition_getWindowOf
var scrollamount = document.body.scrollLeft;
return AnchorPosition_getPageOffs
}
function AnchorPosition_getPageOffs
var ot = el.offsetTop;
while((el = el.offsetParent) != null) {
ot += el.offsetTop;
}
return ot;
}
function AnchorPosition_getWindowOf
var scrollamount = document.body.scrollTop;
return AnchorPosition_getPageOffs
}
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(currentM
}
function showMenu(menu_ID) {
pos = getAnchorPosition(menu_ID + "ref");
if (document.layers) {
document.layers[menu_ID].l
} else {
eval (menu_ID + ".style.left = " + pos.x);
}
if ((currentMenu != null) && (currentMenu != menu_ID)) {
hideCurrentMenu();
}
currentMenu = menu_ID;
MM_showHideLayers(currentM
}
if (document.layers) {
document.captureEvents(Eve
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(
</td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10" height="40"> </td><td
<div id="menu0" style="position:absolute; left:40; top:114; visibility: hidden" onMouseOver="showMenu('men
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="165"><img name="group_reservations1"
</tr>
</table>
</div>
<div id="menu1" style="position:absolute; left:40; top:114; visibility: hidden" onMouseOver="showMenu('men
<table width="560" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="149"><a href="#" onMouseOut="MM_swapImgRest
</tr>
</table>
</div>
<div id="menu2" style="position:absolute; left:151px; top:114px; visibility: hidden" onMouseOver="showMenu('men
<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_swapImgRest
</tr>
</table>
</div>
<div id="menu3" style="position:absolute; left:150; top:114; visibility: hidden" onMouseOver="showMenu('men
<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_swapImgRest
</tr>
</table>
</div>
<div id="menu4" style="position:absolute; left:150px; top:114px; visibility: hidden" onMouseOver="showMenu('men
<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_swapImgRest
</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.
Curious about Versions and browser specifics; and which Plugins called/installed.
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
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&
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&
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.
I am still wondering why this won't work on netscape/opera.
The code seems fine.
Thanks anyway.
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
Asta
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