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 7 of 7
  1. #1
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape Mozilla style.display question/problem with show/hide

    In this post:
    Use Radio Button Value to trigger show/hide DIV
    Quote Originally Posted by Kor
    OK, here's a tip to use visibility:visible/hidden or display:inline/none.

    If use visibility:hidden as a propriety, the object become transparent, but it keeps it's place on the page, position and dimensions. If use display:none the object disapears entirely, so the place where he was becomes empty... Now you have to know these when trying to move or hide some objects on the screen. In your case, if you are using dispaly you can make those tables come near, or something like that.
    Does the statement in red always apply. I am having a tough time with this in Netscape 7.1 and Firebird 0.7.

    In my example script. If I click on "none", then "inline" and repeat the process many times, the space where my hidden TR is position doesn't become empty after the 2nd time. It keeps the space. So, after many many "none/inline" clicks, there is all this white space. This only happens when I put the "id=somename" in the TR (no problems in the TABLE) tag.

    Has anyone experienced this same thing? Is there a way around it? Why does it not empty out?
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    	<title>Test Javascript</title>
    <script language="JavaScript1.2" type="text/javascript">
    	function change(tag,value) {
    	 	if (document.all){
    			document.all(tag).style.display = value;
    		} else if (document.getElementById){
    			document.getElementById(tag).style.display = value;
    		}
    	}
    </script>
    </head>
    <body>
    <form>
    <a href="javascript:change('dork1', 'none');">none</a>
    <a href="javascript:change('dork1', 'inline');">inline</a><br>
    <table cellspacing="0" cellpadding="0" border="0" width=100>
    	<tr id="dork1">
    		<td>dork 1</td>
    	</tr>
    	<tr id="jerk1">
    		<td>jerk 1</td>
    	</tr>
    	<tr id="fool1">
    		<td>fool 1</td>
    	</tr>
    	<tr id="dork2">
    		<td>dork 2</td>
    	</tr>
    	<tr id="jerk2">
    		<td>jerk 2</td>
    	</tr>
    	<tr id="fool2">
    		<td>fool 2</td>
    	</tr>
    </table>
    <input type="reset">
    </form>
    </body>
    </html>

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Set the table border to 1 to clearly see what happens.

    The correct value for display property in a table row is table-row not inline.
    See this reference. But IE doesn't support that.
    If you are using the change() function for table display only, you can modify the code like this:
    Code:
    function change(tag,value) {
     	if (document.all){
    		document.all(tag).style.display = value;
    	} else if (document.getElementById){
    		if (value=='inline') value='table-row';
    		document.getElementById(tag).style.display = value;
    	}
    }

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    iirc you can't toggle the display of a table row anyway.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    But how come my code modification works?

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If your code works despite what I said, the most likely explanation is that I'm wrong
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    New Coder
    Join Date
    Jul 2002
    Location
    Los Angeles
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "table-row" works great in the TR example. Thanks for the help again. I should read up on the CSS Properties as you pointed out.

  • #7
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    'table-row' is the standard css but IE does not comply with that. the best you can do in IE really is 'block' and 'none'.. this is horrible I think

    and yes.. for some reason firefox (.8 for me) is putting extra spaces in the 'block' statements. now its supposed to have newlines in it I think, but I don't think its supposed to be creating all that whitespace.


  •  

    Posting Permissions

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