JavaScript Forum

**Enigma** · 03-19-2006, 12:06 PM

i have some problems creating a javascript-based menu

the page is located here : http://rodekruisedegem.be/New%20design/menuslide2.htm

the problem is i want only the layer that i move my mouse over to open, but in stead, they open all three.

What do i have to change?

**createvibe.com** · 03-19-2006, 11:35 PM

well, I just about changed it all, but I kept your DIV menu elements. I would make a css class for those and clean things up a bit.

I made it work with your images, so name the images you use in your dhtml menu as "img_menuName" where menuName is the menu which it should open. read the code, you'll see "img_Layer1", "img_Layer2", etc. If it were for me, I would have done things differently, but whatever. it works great.

Code:

<html>
<head>
  <title>New Page 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <script language="JavaScript">
    var IE = (navigator.appName == "Microsoft Internet Explorer");
    var active_menu = null, active_img = null, interval = null;
    function show_menu(node_id) {
      hide_menu(true);
      var position;
      active_menu = document.getElementById(node_id);
      active_img = document.images["img_"+ node_id];
      position = getObjectPosition(active_img);
      active_menu.style.left = position.x;
      active_menu.style.top = position.y + active_img.offsetHeight;
      active_menu.mouse_over = false;
      active_menu.style.visibility = "visible";
      interval = setTimeout("hide_menu()", 3000);
    }
    function hide_menu(noCheck) {
      if (interval) clearTimeout(interval);
      if (active_menu && (noCheck || (!active_menu.mouse_over && !active_img.mouse_over))) {
        active_menu.style.visibility = "hidden";
        active_menu = null;
      }
      else if (active_menu)
        interval = setTimeout("hide_menu()", 3000);
    }
    function getObjectPosition(oParent) {
      var yPos = 0, xPos = 0;
      while ( ((IE) ? oParent : (typeof oParent.tagName != "undefined")) ) {
        if (oParent.tagName != "TR") {
          yPos += oParent.offsetTop;
          xPos += oParent.offsetLeft;
        }
        oParent = (IE) ? oParent.parentElement : oParent.parentNode;
      }
      return( {x:xPos, y:yPos} );
    }
    document.onmousedown = hide_menu;
  </script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%204%20new.gif" width="102" height="40" name="img_Layer1" onmouseover="show_menu('Layer1'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%206%20new.gif" width="76" height="40" name="img_Layer2" onmouseover="show_menu('Layer2'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%205%20new.gif" width="67" height="40" name="img_Layer3" onmouseover="show_menu('Layer3'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
  </tr>
</table>
<div id="Layer1" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false" style="border-style:none; visibility:hidden; position:absolute; width:102px; height:75px; z-index:1; left: 133px; top: 37px; background-color: #C0C0C0; layer-background-color: #FFFFCC; overflow: hidden">
  <ol>
    <li>this</li>
    <li>is</li>
    <li>the option</li>
    <li>list</li>
  </ol>
</div>
<div id="Layer2" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false" style="position:absolute; visibility:hidden; width:76px; height:180px; z-index:1; left: 235px; top: 37px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden">
  <ol>
    <li>asdffz</li>
    <li>3433</li>
    <li>adf4</li>
    <li>asfwe</li>
  </ol>
</div>
<div id="Layer3" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false;" style="position:absolute; visibility:hidden; width:67px; height:163px; z-index:1; left: 311px; top: 37px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden">
  <ol>
    <li>asdf</li>
    <li>adf</li>
    <li>adsf</li>
    <li>tert</li>
  </ol>
</div>
</body>
</html>

cheers.

**Enigma** · 03-20-2006, 03:44 AM

thank you!

really appreciated

**Enigma** · 03-20-2006, 11:42 AM

Quote:

Originally Posted by createvibe.com

well, I just about changed it all, but I kept your DIV menu elements. I would make a css class for those and clean things up a bit.

I made it work with your images, so name the images you use in your dhtml menu as "img_menuName" where menuName is the menu which it should open. read the code, you'll see "img_Layer1", "img_Layer2", etc. If it were for me, I would have done things differently, but whatever. it works great.

when i paste this into a table of a website of mine, there is a gap between the layers and the button. How come?
when i just paste in the in front of the [/body] it works great...

**createvibe.com** · 03-20-2006, 05:00 PM

well, I used this code which centers the table in the middle of the page horizontally and vertically and it seems to work great. I would just say to make sure that your table is constructed correctly. perhaps you can paste the HTML and I'll take a look at it...

Code:

<table width="100%" height="100%" cellspacing="0" cellpadding="0" border="0">
  <tr height="100%">
    <td width="100%" align="center" valign="middle">
      <table cellspacing="0" cellpadding="0" border="0">
        <tr>
          <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%204%20new.gif" width="102" height="40" name="img_Layer1" onmouseover="show_menu('Layer1'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
          <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%206%20new.gif" width="76" height="40" name="img_Layer2" onmouseover="show_menu('Layer2'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
          <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%205%20new.gif" width="67" height="40" name="img_Layer3" onmouseover="show_menu('Layer3'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

**Enigma** · 03-21-2006, 08:35 AM

here you can see the problem :

http://rodekruisedegem.be/New%20design/testeke2.htm

and when i just paste it in front of the [/body] tag

http://rodekruisedegem.be/New%20design/testeke1.htm

**createvibe.com** · 03-21-2006, 01:42 PM

ok, well you have 2 closing script elements which weren't doing anything and I think your DIV's may have been throwing it off. you can align the table center w/ out using a DIV. anyways, here's your code with some slight alterations that work with my script. I also noticed that the TBODY tag was throwing the menu off in non IE browsers, so a slight adjustment there.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language="JavaScript">
    var IE = (navigator.appName == "Microsoft Internet Explorer");
    var active_menu = null, active_img = null, interval = null;
    function show_menu(node_id) {
      hide_menu(true);
      var position;
      active_menu = document.getElementById(node_id);
      active_img = document.images["img_"+ node_id];
      position = getObjectPosition(active_img);
      active_menu.style.left = position.x;
      active_menu.style.top = position.y + active_img.offsetHeight;
      active_menu.mouse_over = false;
      active_menu.style.visibility = "visible";
      interval = setTimeout("hide_menu()", 3000);
    }
    function hide_menu(noCheck) {
      if (interval) clearTimeout(interval);
      if (active_menu && (noCheck || (!active_menu.mouse_over && !active_img.mouse_over))) {
        active_menu.style.visibility = "hidden";
        active_menu = null;
      }
      else if (active_menu)
        interval = setTimeout("hide_menu()", 3000);
    }
    function getObjectPosition(oParent) {
      var yPos = 0, xPos = 0;
      while ( ((IE) ? oParent : (typeof oParent.tagName != "undefined")) ) {
        if (oParent.tagName != "TR") {
          if (IE || (!IE && oParent.tagName != "TBODY")) {
            yPos += oParent.offsetTop;
            xPos += oParent.offsetLeft;
          }
        }
        oParent = (IE) ? oParent.parentElement : oParent.parentNode;
      }
      return( {x:xPos, y:yPos} );
    }
    document.onmousedown = hide_menu;
  </script>
<style type="text/css">
<!--
BODY
{
scrollbar-3dlight-color: #9D080D;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #27295A;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-face-color: #9D080D;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
}
-->
</style>
<base target="_self">
<style fprolloverstyle>A:hover {text-decoration: blink}
</style>
</head>
<body link="#800000" vlink="#808080" alink="#800000" background="backgr%20test%203.gif">
 <table align="center" cellpadding="0" cellspacing="0" width="877" height="432" border="1">
  <!-- MSTableType="nolayout" -->
  <tr>
   <td width="100%" height="100%" bgcolor="#800000">
   <table cellpadding="0" cellspacing="0" width="871" height="426">
    <!-- MSTableType="nolayout" -->
    <tr>
     <td align="center" height="426">
      <table cellpadding="0" cellspacing="0" width="866" height="426">
       <!-- MSTableType="nolayout" -->
       <tr>
        <td height="156" align="center" width="171" rowspan="2">
        <img border="0" src="../indext8.jpg" width="169" height="147"></td>
        <td height="31" align="center" width="695">
<table cellspacing="0" cellpadding="0" border="0" id="table1">
  <tr>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%204%20new.gif" width="102" height="40" name="img_Layer1" onmouseover="show_menu('Layer1'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%206%20new.gif" width="76" height="40" name="img_Layer2" onmouseover="show_menu('Layer2'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
    <td><img border="0" src="http://rodekruisedegem.be/New%20desi...%205%20new.gif" width="67" height="40" name="img_Layer3" onmouseover="show_menu('Layer3'); this.mouse_over = true" onmouseout="this.mouse_over = false"></td>
  </tr>
</table>
        </td>
       </tr>
       <tr>
        <td height="125" align="center" width="695">
        <!-- MSCellType="empty" -->
        &nbsp;</td>
       </tr>
       <tr>
        <td height="21" align="center" colspan="2">
        <!-- MSCellType="empty" -->
        &nbsp;</td>
       </tr>
       <tr>
        <td height="249" align="center" colspan="2">
        <!-- MSCellType="empty" -->
        &nbsp;</td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
   </td>
  </tr>
 </table>
<div id="Layer1" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false" style="border-style:none; visibility:hidden; position:absolute; width:102px; height:75px; z-index:1; left: 133px; top: 37px; background-color: #C0C0C0; layer-background-color: #FFFFCC; overflow: hidden">
  <ol>
    <li>this</li>
    <li>is</li>
    <li>the option</li>
    <li>list</li>
  </ol>
</div>
<div id="Layer2" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false" style="position:absolute; visibility:hidden; width:76px; height:180px; z-index:1; left: 235px; top: 37px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden">
  <ol>
    <li>asdffz</li>
    <li>3433</li>
    <li>adf4</li>
    <li>asfwe</li>
  </ol>
</div>
<div id="Layer3" onmouseover="this.mouse_over = true" onmouseout="this.mouse_over = false;" style="position:absolute; visibility:hidden; width:67px; height:163px; z-index:1; left: 311px; top: 37px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden">
  <ol>
    <li>asdf</li>
    <li>adf</li>
    <li>adsf</li>
    <li>tert</li>
  </ol>
</div>
</body>
</html>

**Enigma** · 03-21-2006, 03:03 PM

thanks m8

http://rodekruisedegem.be/New%20design/index.htm

as u can see, the buttons have an effect and the layers should be a little bit higher ... How can i do that?

**createvibe.com** · 03-21-2006, 03:13 PM

the following line sets the 'y' position of the DIV.

active_menu.style.top = position.y + active_img.offsetHeight;

so, you can account for your effects by calculating the amount of pixels from the actual image (or where you want the menu to lay) from total height of the image... for instance, if your drop shadow effects and such took up 15px then you would say

active_menu.style.top = position.y + active_img.offsetHeight - 15; // 15px offset for image effects

remember it's always best to put this amount into a variable so you don't have what we coders refer to as "magic numbers"

so...

Code:

var menuimg_offset = 15;  // 15px offset
 
// ... all of your code ...
 
// inside the show_menu function change the line
active_menu.style.top = position.y + active_img.offsetHeight - menuimg_offset;
 
// ... rest of your code ...

this way you can reuse the script and set the 'menuimg_offset' to 0 if you like, or change it up.