This is driving me crazy! The following code works PERFECTLY in IE, however, I can not get the stuff to work properly in Netscape.
Basically what is happening is when you hover over the javascript menus in IE the menu pops up on top of the textbox (like it should!) however, in Netscape, the menu appears *BEHIND* the textbox.
Here is the HTML document:
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
----------
----
<HTML><HEAD><TITLE>Test Menu</TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="mpopup.js"></SCRIPT>
<BR><BR>
<FORM>
<INPUT TYPE=TEXT NAME=TEST1 SIZE=60 MAXLENGTH=60 VALUE="">
</FORM>
</BODY>
</HTML>
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
----------
----
and here is the JavaScript "mpopup.js"
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
----------
----
//do browser detect stuff
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
var layerRef = (NS4) ? "document" : "document.all";
var styleRef = (NS4) ? "" : ".style";
var menu_items=new Array("menu1","menu2");
var activeMenu = 0;
var maxZ = 1;
var prev_menu_item=null;
// Popup Class that has all the methods and properties
function popout(id, posY, posX, width) {
this.id = id; // the element's name (and the variable's name)
this.posY = posY; // the element's top property
this.posX = posX; // the element's left property
this.width = width; // the element's width
this.show = false; // do not show the element
this.makeMenuBar = makeMenuBar; // constructs the image's tab
this.makeMenu = makeMenu; // constructs the drop down box
this.showMenu = showMenu; // sets the element's visibility
this.hideMenu = hideMenu; // hides the drop down box
}
// Stylesheet to set properties for the individual Menu Items
function setMenuItemStyle(){
document.write(
'\n<STYLE TYPE="text/css">',
'.menubar {',
'color : blue;',
'font-family: \"arial\";',
'font-size : 12px;',
'font-weight : bold;',
'text-decoration : none;',
'}\n',
'A.menubar:hover {color: red;}\n\n',
'.link {',
'color : white;',
'font-family: \"arial\";',
'font-weight : bold;',
'font-size : 12px;',
'text-decoration : none;',
'}\n\n',
'A.link:hover {color: red;}\n\n',
'A.link:active {',
'color : red;',
'text-decoration : none;',
'}\n</STYLE>\n'
);
}
// Create the top level Menu Bar
function makeMenuBar(imgURL, imgHeight, imgWidth, imgAlt) {
document.write(
'\n<STYLE TYPE="text/css">',
'#', this.id, 'img {',
'position: absolute;',
'font-family: \"arial\";',
'font-size : 12px;',
'left: ',this.posX, '; top: ', this.posY, ';',
'width: ', imgWidth, ';',
'text-decoration : none;',
'z-index: 1',
'}',
'</STYLE>',
'\n<DIV ID="', this.id, 'img">',
'\n<A href="javascript:', this.id, '.showMenu('+imgAlt+')" '+
'onmouseover="javascript:'
, this.id, '.showMenu('+imgAlt+')" '+
'onclick="if (window.focus) {window.focus(); return false;}" class="menubar">' + imgURL+
'</A>\n</DIV>'
);
}
// Creates the drop down box, sets its properties & ..
// .. displays the individual links.
function makeMenu(boxBg, boxColor, boxCode) {
var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
document.write(
'\n<STYLE TYPE="text/css">',
'#', this.id, 'box {',
'position: absolute;',
'left: ',this.posX, '; top: ', (this.posY+15), ';',
'width: ', this.width, ';',
'height: auto;',
'layer-background-color: ', boxBg, ';',
'background-color: ', boxBg, ';',
'visibility: hidden;',
'border-width: 2px;',
'border-style: solid;',
'border-color: ', boxColor, ';',
padding,
'z-index: 1',
'}',
'</STYLE>',
'\n<DIV ID="', this.id, 'box" onMouseOver="javascript:{i
f (!NS4) window.event.cancelBubble = true;}">',
boxCode,
'</DIV>\n'
);
//
}
function showMenu(URL) {
// First hide ALL the drop down boxes
for (var i=0;i<menu_items.length;i+
+){
eval(menu_items[i]+".show = false");
eval(layerRef + '["' + menu_items[i] + 'box"]' + styleRef + '.visibility = "hidden"');
}// End of for
// Display the clicked link in a frame
// eval(window.parent.frames[
1].locatio
n.replace(
URL));
if (NS4) {
eval('document.' + this.id + 'img.left = ' + this.posX);
eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));
//eval('document.' + this.id + 'box.zIndex = ' + maxZ);
eval('document.' + this.id + 'box.zIndex = 50');
eval('document.' + this.id + 'box.visibility = "show"');
} else {
eval(this.id + 'img.style.left = ' + this.posX);
eval(this.id + 'img.style.zIndex = ' + (++maxZ));
eval(this.id + 'box.style.zIndex = ' + maxZ);
eval(this.id + 'box.style.visibility = "visible"');
}
activeMenu = this.id; // set the name of the currently active menu
// For IE Browsers catch the onMouseOver event at the menu &..
// .. do not let it get to the document.
if (styleEnabled() && !NS4) window.event.cancelBubble = true;
}
// Hides the currently active menu
function hideMenu(e){
//check if theres a menu active
if (activeMenu) {
menuID = activeMenu+ "box";
if (NS4) {
menuX1 = document[menuID].left;
menuX2 = menuX1 + document[menuID].clip.righ
t;
menuY1 = document[menuID].top;
menuY2 = menuY1 + document[menuID].clip.bott
om;
if (e.pageX < menuX1 || e.pageX > menuX2 || e.pageY > menuY2) {
eval(layerRef + '["' + menuID + '"]' + styleRef + '.visibility = "hidden"');
activeMenu = 0;
}
}else{
eval(layerRef + '["' + menuID + '"]' + styleRef + '.visibility = "hidden"');
activeMenu = 0;
}
}
}
// Check if Stylesheets are enabled or not
function styleEnabled(){
return ((NS4) || IE4);
}
function init(){
if (!styleEnabled()) return;
// Trap the onMouseMove event and call hideMenu
if (NS4){
document.captureEvents(Eve
nt.MOUSEMO
VE);
document.onmousemove = hideMenu;
}else{
document.onmouseover = hideMenu;
}
setMenuItemStyle(); // set the default display style for the menu items
activeMenu = 0; // Initially no menu is active
var spacing=0;
var image_width=0;
// Create the 1st Popup menu (For Corporate Information)
if (NS4){
spacing=200;
image_width=138;
menu1 = new popout('menu1', 13,spacing, 200);
}else{
spacing=220;
image_width=145;
menu1 = new popout('menu1', 5,spacing, 200);
}
// Insert the URL to the images you want here
// with the ID, Y position, X Position & size/width of the box
menu1.makeMenuBar('Menu_1'
, 25, image_width, "\'corp_info.html\'");
menu1.makeMenu('black', 'gray',
'\n<A href="corp_info_1.html" target="_self" class="link">MENU1 ITEM 1</A>\n<BR>' +
'\n<A href="corp_info_2.html" target="_self" class="link">MENU1 ITEM 2</A>\n<BR>' +
'\n<A href="corp_info_3.html" target="_self" class="link">MENU1 ITEM 3</A>\n<BR>' +
'\n<A href="corp_info_4.html" target="_self" class="link">MENU1 ITEM 4</A>\n<BR>' +
'\n<A href="corp_info_5.html" target="_self" class="link">MENU1 ITEM 5</A>\n<BR>' +
'\n<A href="corp_info_6.html" target="_self" class="link">MENU1 ITEM 6</A>\n<BR>');
// Create the 2nd Popup menu
// with the ID, Y position, X Position & size/width of the box
if (NS4){
spacing+=image_width+5;
image_width=65;
menu2 = new popout('menu2', 13,spacing ,205);
}else{
spacing+=image_width+5;
image_width=70;
menu2 = new popout('menu2', 5,spacing ,205);
}
// Insert the URL to the images you want here
menu2.makeMenuBar('Menu_2'
, 25, image_width, "\'products.html\'");
menu2.makeMenu('black', 'gray',
'\n<A href="products_1.html" target="_self" class="link">MENU2 ITEM 1</A>\n<BR>' +
'\n<A href="products_2.html" target="_self" class="link">MENU2 ITEM 2</A>\n<BR>' +
'\n<A href="products_3.html" target="_self" class="link">MENU2 ITEM 3</A>\n<BR>' +
'\n<A href="products_4.html" target="_self" class="link">MENU2 ITEM 4</A>\n<BR>' +
'\n<A href="products_5.html" target="_self" class="link">MENU2 ITEM 5</A>\n<BR>' +
'\n<A href="products_6.html" target="_self" class="link">MENU2 ITEM 6</A>\n<BR>');
}
init();
--------------------------
----------
----------
----------
----------
----------
----------
----------
----------
----------
----
Cheers!®©
