By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,161 Members | 2,002 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,161 IT Pros & Developers. It's quick & easy.

hidding and unhidding, but what happen to the table?

P: n/a
I have this simple bit of code that when you check a checkbox and it
displays or hides two other fields (well actually two parts of the
document with two different IDs. Pretty straight forward... I thought.
The fields come and go, but something happens to the table formatting;
on NS 7.1 and Firefox 1.0 it seems to miscount or hide the number of TD
tags or something else confusing.

Can anyone tell me what I'm doing wrong?
-Paul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" >
function hideOn( checkbox, offId, onId ) {
uncheckedDiv = document.getElementById(offId);
checkedDiv = document.getElementById(onId);
if ( checkbox.checked ) {
checkedDiv.style.visibility = 'visible';
checkedDiv.style.display = "block";
uncheckedDiv.style.visibility = 'hidden';
uncheckedDiv.style.display = "none";
} else {
checkedDiv.style.visibility = 'hidden';
checkedDiv.style.display = "none";
uncheckedDiv.style.visibility = 'visible';
uncheckedDiv.style.display = "block";
}
}
</script>
</head>

<body>
<form>
<table align="center">
<tr>
<td nowrap align="right" valign="top">&nbsp;
</td>
<td nowrap align="left" valign="top">As textarea (or as text)
<input type="checkbox" name="docTxt" onChange="hideOn(
this.form.docTxt, 'asTextArea', 'asText' );"/>
</td>
<tr>
<tr id="asTextArea" style="visibility:visible" valign="baseline">
<td nowrap align="right" valign="top">TextArea:</td>
<td align="left" valign="top">
<textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="visibility:hidden">
<td nowrap align="right" valign="top">Text:</td>
<td align="left" valign="top"><input type="text" name="bodyFile"
size="40" /></td>
</tr>
</table>
</form>
</body>
</html>
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
On Wed, 22 Dec 2004 10:52:39 -0800, P.Hill
<go************@xmissionREMOVE.com> wrote:

[snip]
Can anyone tell me what I'm doing wrong?
I haven't tested your code, but I expect it's because you're setting the
CSS display property to 'block'. In IE, that fine because IE doesn't
understand the correct values. However, compliant browsers like Mozilla
require table rows be given the value 'table-row'. The simple solution is
not specify a value at all: assign an empty string. This removes the
inline style, making the browser fall-back to document-wide rules.

[snip]
<script language="JavaScript" >
The language attribute has been deprecated for over six years. Use the
type attribute instead.

<script type="text/javascript">
function hideOn( checkbox, offId, onId ) {
uncheckedDiv = document.getElementById(offId);
checkedDiv = document.getElementById(onId);
These should be local variables. Declare them with the var keyword.
if ( checkbox.checked ) {
checkedDiv.style.visibility = 'visible';
checkedDiv.style.display = "block";
uncheckedDiv.style.visibility = 'hidden';
uncheckedDiv.style.display = "none";
} else {
checkedDiv.style.visibility = 'hidden';
checkedDiv.style.display = "none";
uncheckedDiv.style.visibility = 'visible';
uncheckedDiv.style.display = "block";
}


Two comments here:

1) Setting both the visibility and display properties is excessive.
Just concern yourself with display.
2) A more efficient approach would be:

checkedDiv.style.display = checkbox.checked ? '' : 'none';
uncheckedDiv.style.display = !checkbox.checked ? '' : 'none';

[snipped table]

I really suggest you drop presentational mark-up and move to a Strict DTD.

Mike
Please don't use tabs when posting code. Use two spaces to indent blocks.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #2

P: n/a
"P.Hill" <go************@xmissionREMOVE.com> wrote in message
news:cq**********@news.xmission.com...
I have this simple bit of code that when you check a checkbox and it
displays or hides two other fields (well actually two parts of the
document with two different IDs. Pretty straight forward... I thought. The fields come and go, but something happens to the table formatting;
on NS 7.1 and Firefox 1.0 it seems to miscount or hide the number of TD tags or something else confusing.

Can anyone tell me what I'm doing wrong?
-Paul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" >
<script type="text/javascript">
function hideOn( checkbox, offId, onId ) {
uncheckedDiv = document.getElementById(offId);
checkedDiv = document.getElementById(onId);
if ( checkbox.checked ) {
checkedDiv.style.visibility = 'visible';
checkedDiv.style.display = "block";
A <tr> is not display:block, it is display:table-row, but IE doesn't
support that, so the best approach is to set the display style to an
empty string, which will make the element use it's default value for
that attribute:

checkedDiv.style.display = "";

You also don't need to change both the -visibility- and -display- style
attributes, only -display- needs to be toggled.
uncheckedDiv.style.visibility = 'hidden';
uncheckedDiv.style.display = "none";
} else {
checkedDiv.style.visibility = 'hidden';
checkedDiv.style.display = "none";
uncheckedDiv.style.visibility = 'visible';
uncheckedDiv.style.display = "block";
uncheckedDiv.style.display = "";
}
}
</script>
</head>

<body>
<form>
<table align="center">
<tr>
<td nowrap align="right" valign="top">&nbsp;
</td>
<td nowrap align="left" valign="top">As textarea (or as text)
<input type="checkbox" name="docTxt" onChange="hideOn(
this.form.docTxt, 'asTextArea', 'asText' );"/>
<input type="checkbox"> has no onChange event, it has an onclick event.
You also only need to pass -this-, you don't need a fully qualified
reference to the element you are triggering the event on:

<input type="checkbox" name="docTxt" onchange="hideOn(this,
'asTextArea', 'asText');">
</td>
<tr>
Should be </tr>
<tr id="asTextArea" style="visibility:visible" valign="baseline">
<td nowrap align="right" valign="top">TextArea:</td>
<td align="left" valign="top">
<textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="visibility:hidden">
<td nowrap align="right" valign="top">Text:</td>
<td align="left" valign="top"><input type="text" name="bodyFile"
size="40" /></td>
</tr>
</table>
</form>
</body>
</html>


Putting it all together:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function hideOn(checkbox, offId, onId) {
var uncheckedDiv = document.getElementById(offId);
var checkedDiv = document.getElementById(onId);
if (checkbox.checked) {
checkedDiv.style.display = "";
uncheckedDiv.style.display = "none";
} else {
checkedDiv.style.display = "none";
uncheckedDiv.style.display = "";
}
}
</script>
</head>

<body>
<form>
<table align="center">
<tr valign="top">
<td nowrap="nowrap" align="right">&nbsp;</td>
<td nowrap="nowrap">As textarea (or as text)
<input type="checkbox" name="docTxt" onclick="hideOn(this,
'asTextArea', 'asText' );">
</td>
</tr>
<tr id="asTextArea" valign="top">
<td nowrap align="right">TextArea:</td>
<td><textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="display:none;" valign="top">
<td nowrap align="right">Text:</td>
<td><input type="text" name="bodyFile" size="40"></td>
</tr>
</table>
</form>
</body>
</html>

Tested and working in Firefox 1.0, IE 6 and Opera 7.54u1 (watch for
word-wrap).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #3

P: n/a
Grant Wagner wrote:
"P.Hill" <go************@xmissionREMOVE.com> wrote in message
news:cq**********@news.xmission.com...

A <tr> is not display:block, it is display:table-row, [...]
checkedDiv.style.display = "";
So can you direct me to a good list which tells me which objects do
have which styles? Knowing the values available goes a long way
to solving such simple problems like this. Of course, I should
forget about tables and move to divs and get with the 21st Century,
but that's for another day.
You also don't need to change both the -visibility- and -display- style
attributes,
Okay, I got that from Michael, thanks to both.
<input type="checkbox"> has no onChange event, it has an onclick event.
Hmm, I think this was the result of Macromedia doing code completion for
me. It DOES show up in their list and it worked on a few browser releases.
[...]
<input type="checkbox" [...]
</td>
<tr>

Should be </tr>


Wow, good eye. Thanks (even though this was just the demo page).

Thanks also for putting up with my beginners mistakes.

-Paul
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.