Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Table hidding

  1. #1
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Table hidding

    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. What it does is it shuts the submenu when I leave the first row. Here's some code :

    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>

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try hiding the sub menu, rather than its container, for instance: this.getElementsByTagName('table')[0].style...
    *this message will self destruct in n-seconds*

  • #3
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 :

    Code:
    <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>

  • #4
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can comment out the insertion of the js file.

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ultraman69
    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%)...
    *this message will self destruct in n-seconds*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •