...

View Full Version : 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%)...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum