onMouseout problem

[Trusts]

Hi all,

I have a navbar I created using divs in the body and js functions that are called on the onmouseout in the divs. The navebar has a menu appearance with top level items that stay visible. When the mouse goes over a top level item (onMouseover) that item's sub menu opens underneath - with a routine that makes it visible. When the mouse goes off the submenu the onMouseoff runs a routine that makes all submenus not visible. This is in a routine called nosubs() that is called from each div that contains a submenu (there are about 6 menu item with associated submenus).

The nosubs() routine sets the visibility of each submenu to be not visible. Yet the submenu the mouse just went off of stays open. My guess is that a div that contains a submenu, cannot make itself invisible since it is the one that called the routine.

Here is the nosubs() routine:

function nosubs(){
changeState("filesubmenu", "hidden");
changeState("itemsubmenu", "hidden");
changeState("pagesubmenu", "hidden");
changeState("promosubmenu", "hidden");
changeState("tablesubmenu", "hidden");
changeState("reportingsubmenu", "hidden");
changeState("imagesubmenu", "hidden");
changeState("helpsubmenu", "hidden");
}

The changeState routine is a toggle type of function that applies the attribute ("hidden") to the item(for example "filesubmenu")

Here is the div for filesubmenu:

<div name="filesubmenu" id="filesubmenu" onMouseout="nosubs()">
<a href="

http://www.something.com">Something</a>

<hr size="1">
<a href="

http://www.anything.com">Anything</a>

<hr size="1">
<a href="

http://www.Yahoo.com">Yahoo</a>

</div>

Any guesses why filesubmenu will not go invisible. It is in the nosubs() routine to change to hidden, but it stays after the mouse moves away. I think it can't change "itself".

Any comments/ideas?

Thanks,
KB

 

[BabyJeffy]

Just as a test, change the function nosubs() to be this:

function nosubs() {
  document.getElementById('filesubmenu').style.visibility = 'hidden';
}

And you should see filesubmenu go invisible on mouseout. If this works, then you might want to take a closer look at what changeState() is doing.

Check your page validates against a doctype (

http://validator.w3.org)...

there could be a problem with duplicate IDs (that this validation will pick up for you).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[kaht]

I was going to suggest the same as Jeff - ensure that you have all unique IDs on page. Additionally, I wanted to mention that I usually toggle the "display" style for things such as these because that will remove it from the page entirely. When toggling the "visibility" parameter the element place still stays on the screen. However, I guess if you're using absolutely positioned elements it probably won't matter either way.

Just for info's sake display properties are toggled like this:

[gray][i]//to hide[/i][/gray]
document.getElementById("someElement").style.display = "none";
[gray][i]//to show[/i][/gray]
document.getElementById("someElement").style.display = "block";

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[Trusts]

BabyJeffy, Khat,

Thanks for the responses. Actually I just discovered by throwing an Alert into nosubs(), that nosubs does not run when called by the divs that are the submenus! Yet nosubs() does run when called by the menubar div. Here is some code to make this easier to see.

First notice that there is a div for the menubar itself. It's onMouseover does run nosubs. Then there are pairs of divs - first the top menu item, and then the submenu for that top menu. Notice where the submenu divs call nosubs - in the same place as the menubardiv. The top level menu items call other routines, such as filesub() - these work and are not an issue. But nosubs does not run when the mouse leaves an open submenu. Following this piece of code is other code with the javascript and css.



<div name="menubar" id="menubar" onMouseover="nosubs()">
</div>

<div name="file" id="file">
<A href="javascript:void(0)" onMouseover="filesub()" style="color: Blue;"> File</a>
</div>

<div name="filesubmenu" id="filesubmenu" onMouseout="nosubs()" style="color: Blue;">
<a href="toExcel.aspx" style="color: Blue;">&nbsp;-Excel D/Load</a>
<BR>
<a href="changepassword.aspx" style="color: Blue;">&nbsp;-Change Password</a>
</div>


<div name="item" id="item">
<A href="javascript:void(0)" onMouseover="itemsub()" style="color: Blue;">Item Admin</a>
</div>

<div name="itemsubmenu" id="itemsubmenu" onMouseout="nosubs()" style="color: Blue;">
<A HREF="AddNewItem.aspx" style="color: Blue;">&nbsp;-New</a>
<BR>
<A HREF="ItemList.aspx" style="color: Blue;">&nbsp;-Edit</a>
</div>


OK, here is the other code:



function changeState(layerRef, state){
eval("document" + layer + "['" + layerRef + "']" + style + ".visibility = '" + state + "'");
}


function filesub(){
changeState("filesubmenu", "visible");
changeState("itemsubmenu", "hidden");
changeState("pagesubmenu", "hidden");
changeState("promosubmenu", "hidden");
changeState("tablesubmenu", "hidden");
changeState("reportingsubmenu", "hidden");
changeState("imagesubmenu", "hidden");
changeState("helpsubmenu", "hidden");
}
function itemsub(){
changeState("filesubmenu", "hidden");
changeState("itemsubmenu", "visible");
changeState("pagesubmenu", "hidden");
changeState("promosubmenu", "hidden");
changeState("tablesubmenu", "hidden");
changeState("reportingsubmenu", "hidden");
changeState("imagesubmenu", "hidden");
changeState("helpsubmenu", "hidden");
}
function nosubs(){
changeState("filesubmenu", "hidden");
changeState("itemsubmenu", "hidden");
changeState("pagesubmenu", "hidden");
changeState("promosubmenu", "hidden");
changeState("tablesubmenu", "hidden");
changeState("reportingsubmenu", "hidden");
changeState("imagesubmenu", "hidden");
changeState("helpsubmenu", "hidden");
}

Note that I took the Alert back out of nosubs(). Also note there are more menu items and submenus, but pasted enough here to see what is going on. See that no subs simply attempts to hide any visible sub menus. Here is the css:

#menubar{
background-color: #8080FF;
position: absolute;
left: 0;
width: 100%;
top: 0;
height: 25;
}

#file{
background-color: transparent;
position: absolute;
left: 3%;
top: 0;
}

#filesubmenu{
background-color: #8080FF;
left: 3%;
position: absolute;
top: 15;
width: 150;
height:45px;
border: outset 1.5px Blue;
}

#item{
background-color: transparent;
position: absolute;
left: 11%;
top: 0;
}

#itemsubmenu{
background-color: #8080FF;
left: 11%;
position: absolute;
top: 15;
width: 60;
height:45px;
border: outset 1.5px Blue;
}


OK any comments on this are appreciated!

Thanks,
KB

 

[kaht]

I had to change your function to this:

function changeState(layerRef, state){
   document.getElementById(layerRef).style.visibility = state;
}

And the onmouseout of the anchors was working fine. However, are you sure this is what you want? As you move the mouse down the submenubar from one anchor to the next, the whole menu disappears on you. There are a lot of pre-fab pulldown menus out on the web. You can find them pretty easily thru google. If your problems persist with these functions it might be faster for you to just modify a pre existing one.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[Trusts]

Thanks Kaht,
Yeah, I've tried variations of this where the sub menu closes before you can use it.

The thing is - this coding is one of the pre-designed pieces! Oh well, I'll look for another.

 

[kaht]

this coding is one of the pre-designed pieces!

Yeah, in that case if you don't have any attachment to them I'd drop it in favor of something better.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]