hide

Oakendin

06-02-2004, 09:48 PM

In this post:
http://www.codingforums.com/showthread.php?t=28170
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?

<!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>

glenngv

06-03-2004, 03:57 AM

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 (http://www.devguru.com/Technologies/css/quickref/css_display.html). But IE doesn't support that. :rolleyes:
If you are using the change() function for table display only, you can modify the code like this:
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;
}
}

brothercake

06-03-2004, 06:12 AM

iirc you can't toggle the display of a table row anyway.

glenngv

06-03-2004, 06:47 AM

But how come my code modification works?

brothercake

06-03-2004, 07:02 AM

If your code works despite what I said, the most likely explanation is that I'm wrong :)

Oakendin

06-09-2004, 07:20 PM

"table-row" works great in the TR example. Thanks for the help again. I should read up on the CSS Properties (http://www.devguru.com/Technologies/css/quickref/css_display.html) as you pointed out.

jedimonkey

02-02-2005, 08:34 PM

'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.