Table hidding

ultraman69

03-03-2005, 09:37 PM

Hi !

I'm fairly new to the wonderful world of javascript. I'm trying to build a dynamic menu based on sample code from a book I've bought. My question is, how can I make a sub menu (<table>) disapear on mouse out ? I tried putting my table in a <div> with onmouseout event, but it just won't work properly. :confused: What it does is it shuts the submenu when I leave the first row. Here's some code :

<DIV onmouseout="this.style.visibility='hidden'">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td bgcolor='#ff00cc'
onMouseOver=this.style.background='#66ff88'
onMouseOut=this.style.background='#ff00cc'
height=20><font style='FONT-SIZE: 10pt'>Sub 1</font>
</td>
</tr>
<tr><td bgcolor='#ff00cc'
onMouseOver=this.style.background='#66ff88'
onMouseOut=this.style.background='#ff00cc'
height=20><font style='FONT-SIZE: 10pt'>Sub 2</font>
</td>
</tr>
</table>

codegoboom

03-04-2005, 09:18 AM

Try hiding the sub menu, rather than its container, for instance: this.getElementsByTagName('table')[0].style...

ultraman69

03-04-2005, 02:04 PM

Well... tried it. Same result :( . This is just like if the event gets raised when I change row instead of when I leave the table. Could this be related to the fact that I'm using a style A:hover ?

Here's the complete HTML test page :

<html>
<head>
<title>HTMLTestPage</title>

<STYLE TYPE="text/css">
A.menu {
color:red;
font-family:sans-serif;
font-weight:bold;
font-size:10pt;
text-decoration:none;
}

A:hover.menu {color:blue}

</STYLE>
</head>

<body>

<div id='cadremenu' style="position:absolute; visibility: hidden; z-index: 3;"></div>
<script language='javascript' src='Controles/Menu/menu.js'></script>

<DIV onmouseout="this.getElementsByTagName('table')[0].style.visibility='hidden'">
<table border=0 cellpadding=0 cellspacing=0>
<tr><td bgcolor='#ff00cc'
onMouseOver=this.style.background='#66ff88'
onMouseOut=this.style.background='#ff00cc'
height=20><font style='FONT-SIZE: 10pt'>Test 1</font>
</td>
</tr>
<tr><td bgcolor='#ff00cc'
onMouseOver=this.style.background='#66ff88'
onMouseOut=this.style.background='#ff00cc'
height=20><font style='FONT-SIZE: 10pt'>Test 2</font>
</td>
</tr>
</table>
</DIV>

</body>
</html>

ultraman69

03-04-2005, 02:06 PM

You can comment out the insertion of the js file.

codegoboom

03-05-2005, 01:27 AM

This is just like if the event gets raised when I change row instead of when I leave the table.

I'm not sure what you mean, but if this has to do with the event not firing on the div, try giving it layout (style its width to 100%)...