Javascript menus; getting onMouseOut to work properly

Menus disappear to fast

[tortured virtue]

I am having a problem with this Javascript menu exercise. I am using Gary Smith/Netscapes menu.js file. I can get the menus to work on mouseovers, and they will go away with mouseouts, but when you move your mouse away from the displayed text for the menu, the menu disappears right away. How do I get it to stay up when moving the mouse over top the menu items, and then disappear when the mouse is moved to the next menu?
Sorry if this is a stupid question. I am kinda new to this.

[BlobFisk]

Welcome to WebmasterWorld, tortured virtue!

One way to approach this would be to write a small timeout script that would delay the hiding of the menu layer. This requires some dissection of the code you are using and some knowleldge of JavaScript.

Assuming that there is a function to hide the menu onmouseout, you could do something like setTimeout( "hideLayer(layerName)" , 1000);. This commands exectutes the function in the quotation marks after the time specified (in milliseconds).

The problem with off-the-shelf scripts are that they are difficult to customise, especially one's that hold the menu items in an array of some sort.

HTH

[tortured virtue]

Thanks Bob!
I am going to have to learn exactly what layers are apparently. Here is sample code of how I display the menu:
<a href="javascript://" onmouseover="showMenu(myMenu6, 20,78);" onmouseout="hideMenu(myMenu6);"> myMenu6</a>

So I am thinking I can just use your timeout suggestion in that line? That would be great if it would work.

[tortured virtue]

Update:
Addins that to that line didnt seem to help. Am I missing something here?

[Reflection]

Not sure if this will be any help but...

If you are using a fixed positioned menu you can grab the coordinates of the mouse and compare them to your menu(give each menu a left,right and bottom coordinate, based on their width and height) and hide/show accordingly.

Or if you make sure that your showMenu function also hides every other menu, you can combine that with the 'timeout' suggestion from above, and you will have something similar to a common windows menubar.

[tortured virtue]

Actually, I was having trouble getting the other menus to disappear when I opened a new menu (I would have three menus open at one time if my mouse went over all of them) which is why I used the "onMouseOut" command to close the window. I could drop the "onMouseOut" command if I knew a way to close all other menus when I "mouseover" one of the other ones, or if the mouse wasnt over any of the menus. Can someone throw me a bone on how to get started if I wanted to go in that direction? Thanks!

[Reflection]

which is why I used the "onMouseOut" command to close the window. I could drop the "onMouseOut" command if I knew a way to close all other menus when I "mouseover" one of the other ones...

Well you have --> onmouseout="hideMenu(myMenu6);"

Now in your showMenu() function call your hideMenu() function with every menu except the one passed to the showMenu function.

...or if the mouse wasnt over any of the menus

The simplest way to hide the menus when the mouse isnt over them is to use that timeout method and give enough of a delay so that the user isnt still reading the menu, its not perfect but it will hide them.

Otherwise I think you have to determine the mouse coordinates and then detemine if the coordinates are 'above' one of your menus.

Hope that helps.

[tortured virtue]

Well you have --> onmouseout="hideMenu(myMenu6);"

Now in your showMenu() function call your hideMenu() function with every menu except the one passed to the showMenu function.

I can be so slow sometimes! It finally works. Here is the line I used to display the menu:
<a href="javascript://" onmouseover="showMenu(mozilla,30,40),hideMenu(test),hideMenu(myMenu6);" > mozilla</a>
I know, strange menu names, but I am just trying to learn right now. Thanks for your help.

[tortured virtue]

Actually it works except that it leaves the last menu up open eternally. I would like to use the timeout method, but I guess I am having trouble with the syntax. Should I just include it in the showmenu function?

[Reflection]

Ive never used the timeout method but I think all you have to do is include it somewhere in your showmenu function...

function showMenu(menuName){
// show menuName and hide others

setTimeout("hideMenu(menuName)",1000);
}

Just play around with the milliseconds parameter so it doesnt disappear too soon or too late.

[BlobFisk]

Reflection is on the right road, but I wouldn't put the setTimeOut in the showmenu() function, as this will cause the layer to become hidden again after the timeout delay even if the user is still hovering over the menu element.

You may need to include another function instead of your hidemenu on the onmouseout. Something like delayhidemenu:

function delayHideMenu(menuName) { 
 setTimeout("hideMenu(menuName)",1000); 
 } 

So, now your onmouseout would look like: onmouseout="delayHideMenu(menu6)"

I've not tested this though!

[tortured virtue]

I am going to pull my hair out shortly. I tried your code Bob and it seemed to work, but only on the first mouse over. After that, it went back to no delay whatsoever. It also would only work for one menu at a time, and not the two others. Here is my sample code:

<script>
function delayHideMenu(mozilla) {
setTimeout("hideMenu(mozilla)",1000);
}
</script>
<script>
function delayHideMenu(test) {
setTimeout("hideMenu(test)",1000);
}
</script>
<script>
function delayHideMenu(myMenu6) {
setTimeout("hideMenu(myMenu6)",1000);
}
</script>

<script>
loadMenus("mozilla","test","myMenu6");
</script>

<font face="Helvetica, Arial, sans-serif">

<a href="javascript://" onmouseover="showMenu(mozilla,30,40),hideMenu(test),hideMenu(myMenu6);"

onmouseout="delayHideMenu(mozilla)"> mozilla</a>

<a href="javascript://" onmouseover="showMenu(myMenu6,10,40),hideMenu(test),hideMenu(mozilla);"

onmouseout="delayHideMenu(myMenu6)"> myMenu6</a>

<a href="javascript://" onmouseover="showMenu(test,20,40),hideMenu(mozilla),hideMenu(myMenu6);"

onmouseout="delayHideMenu(test)"> test</a>

</font>

With this code, the delay will work for the first mouseover for myMenu6. After that, the menu will disappear immediately. The other menus will stay up until I move the mouse over another menu. Thanks for your help!

[BlobFisk]

Take the script from my previous post and add it at the end of your other JavaScript finctions. You only need one instance of it.

Then, in your html, your onmouseout would now look like onmouseout="delayHideMenu('TheMenuInQuestion')".

Also, in your onmouseover, seperate your function calls with a ';', and not a comma.

[tortured virtue]

Blob,
Thanks for helping me with this. I added those lines to my menu.js file originally and got "Error: menuName is not defined
Source File: file:///T:/JavaScript/menu8.js
Line: 1255" errors. I changed "menuName" in your script to "Menu" in my script and then started getting "Error: l.Menu has no properties
Source File: file:///T:/JavaScript/menu8.js
Line: 1051". I think that is progress. :-¦ Anyway, the menus don`t hide which you probably already guessed. Here is the hideMenu section of the menu.js:
function hideMenu(menu) {
menu = menu ¦¦ this.Menu ¦¦ this;
var l = menu.menuLayer ¦¦ menu;
for (var i=0; i<l.Menu.childMenus.length; i++)
l.Menu.hideChildMenu(l.Menu.childMenus[i])
l.Menu.unHilite();
l.visibility = "hidden";
l.isFixed = false;
l.Menu.setMenuClip();
Is there a way to add a timeout in there? Sorry for my ignorance.

[tortured virtue]

Ok, I think I have it working now. What I did was modify your code to be:
}

function delayHideMenu() {
setTimeout("hideMenu(test)",5000); setTimeout("hideMenu(myMenu6)",5000); setTimeout("hideMenu(mozilla)",5000);
}

Is this bad practice? It seems to do exactly what I want it to do this way.

[BlobFisk]

It's not the best way of doing it - but if it works...! My original idea was to make a generic function in which you could feed in the layer name, and then specify the layer that you want to delay dissapear.

At the moment you are asking it to hide layers that aren't visible!