hidding and unhidding, but what happen to the table?

P.Hill

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"> 
</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

Subscribe Post Reply

1518

Michael Winter

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

Grant Wagner

"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"> 
</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"> </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.Hill

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

by: Jukka K. Korpela | last post by:

I have noticed that the meaning of visibility: collapse has been discussed on different forums, but with no consensus on what it really means. Besides, implementations differ. The specification...

HTML / CSS

Hidding/Showing Form Field

by: A P | last post by:

Hi! My first question was, can I hide a form field and make it visible upon selecting a particular value on a dropdown select field? Hoping for your immediate response. Me

ASP / Active Server Pages

hidding div - showing div

by: news.west.cox.net | last post by:

I have something like this in a function: .... var box = document.getElementById("box"); box.style.visibility = 'hidden'; .... This hides a div setup like the following: <div id="box">

Javascript

Hidding information in ASP.Net

by: Sam Carleton | last post by:

Ok, have posted here before, but as a refresher, I have 8 years experience as a C/C++ Windows developer. Currently I am working on my first real web site using ASP.Net. I must admit that so far...

ASP.NET

669

What is Expressiveness in a Computer Language

by: Xah Lee | last post by:

in March, i posted a essay â€œWhat is Expressiveness in a Computer Languageâ€, archived at: http://xahlee.org/perl-python/what_is_expresiveness.html I was informed then that there is a academic...

Python

Hidding and Unhidding a particular button, depending on who is logged in

by: snipersix | last post by:

I have a switchboard on my database that also have a login system. What i want to happen is to hide the database window, and if a customer logs in, he wont have the button in his switchboard that...

Microsoft Access / VBA

MySQL table suddenly disappeared and a func table was created

by: wongwaichi | last post by:

Hi, everyone. I am not sure if i am writing in the correct group. But somehow it relates to MySQL, i hope someone can help me. I am working on a web site which is developed by PHP and MySQL,...

MySQL Database

transaction and open table

by: Ryan Liu | last post by:

Hi, I have few db write and read to execute, so I use transaction. Is that a problem or is that a regular way that I only use transaction on some cmds only, and other cmds I do not use...

C# / C Sharp

ExecuteReader Blocks Inserts on a Table

by: Charles Law | last post by:

I have a sproc that returns data from a table using a simple SELECT. There are quite a few rows returned, e.g. ~150,000. In my first application, I use a reader on the sproc and iterate through...

.NET Framework

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

hidding and unhidding, but what happen to the table?

Similar topics