SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide table with visibility attribute

    Greetings, I'm trying to change the visibility of a table by setting the (visibility = 'hidden') I don't need to keep the actual space of the table reserved when the visibility is hidden (I want to act similar to using display:none) Is there a way to do this? the reason why I'm choosing to use visibility instead of display is because when display is set to 'none' and then back to 'inline', your whole table structure and content get messed up.
    I use visibility to hide a div and get around collapsing the space by setting the style.height = 1px. I tried doing this same thing with a table, but I'm not able to get it to work. Thanks.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    try display:block;

  3. #3
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, that didn't do it. other suggestions? Thanks.

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Some code, Please ?

  5. #5
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, here's the code I tried for what your recommended (display:block)
    Note: I'm trying to get this to work in FF.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript">
    function Manage(NodeID)
    {
    	var oNode = document.getElementById(NodeID);
    	if (oNode.style.display == 'block') { oNode.style.display = 'inline';}
    	else {oNode.style.display = 'block';}
    }
    </script>
    <body>
    <table id="Tbl1" width="200" cellpadding="0" cellspacing="0" border="1">
    <tr>
    	<td valign="top" width="200">In this edition:</td>
    </tr>
    <tr>
    	<td>Cell one</td>
    </tr>
    </table>
    <label><input id="border" name="border" type="checkbox" value="Border" onChange="Manage('Tbl1');" checked="checked"> Show/Hide</label><br />
    </body>
    </html>
    Thanks.

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    display none
    display block

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript">
    function Manage(NodeID)
    {
    	var oNode = document.getElementById(NodeID);
    	if (oNode.style.display == 'none') { oNode.style.display = 'block';}
    	else {oNode.style.display = 'none';}
    }
    </script>
    
    </head>
    <body>
    <table id="tbl1" width="200" cellpadding="0" cellspacing="0" border="1" class="x">
    <tr>
    	<td valign="top" width="200">In this edition:</td>
    </tr>
    <tr>
    	<td>Cell one</td>
    </tr>
    </table>
    <label><input id="border" name="border" type="checkbox" value="Border" onchange="Manage('tbl1');" checked="checked" /> Show/Hide</label><br />
    </body>
    </html>

  7. #7
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in both IE and FireFox. This is what I was looking for. I appreciate your help with this. Thanks again.

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    IE needs a second click ?, execute ? why ?

  9. #9
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it works great.

  10. #10
    SitePoint Addict
    Join Date
    Sep 2004
    Location
    Denver
    Posts
    385
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, I'm trying to apply this code to a <td> instead of a <table>. check the checkbox few times and noticed how things start to change... Thanks.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script language="javascript">
    function Manage(NodeID)
    {
    	var oNode = document.getElementById(NodeID);
    	if (oNode.style.display == 'none') { oNode.style.display = 'block';}
    	else {oNode.style.display = 'none';}
    }
    </script>
    
    </head>
    <body>
    <table id="tbl1" width="200" cellpadding="0" cellspacing="0" border="1" class="x">
    <tr>
    	<td rowspan="2" id="Left">...</td>
    	<td valign="top" width="200">In this edition:</td>
    </tr>
    <tr>
    	<td id="td1">Cell one</td>
    </tr>
    </table>
    <label><input id="border" name="border" type="checkbox" value="Border" onclick="Manage('td1');" checked="checked" /> Show/Hide</label><br />
    </body>
    </html>


Bookmarks

Posting Permissions

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