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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaS cript" >
function hideOn( checkbox, offId, onId ) {
uncheckedDiv = document.getEle mentById(offId) ;
checkedDiv = document.getEle mentById(onId);
if ( checkbox.checke d ) {
checkedDiv.styl e.visibility = 'visible';
checkedDiv.styl e.display = "block";
uncheckedDiv.st yle.visibility = 'hidden';
uncheckedDiv.st yle.display = "none";
} else {
checkedDiv.styl e.visibility = 'hidden';
checkedDiv.styl e.display = "none";
uncheckedDiv.st yle.visibility = 'visible';
uncheckedDiv.st yle.display = "block";
}
}
</script>
</head>

<body>
<form>
<table align="center">
<tr>
<td nowrap align="right" valign="top">&n bsp;
</td>
<td nowrap align="left" valign="top">As textarea (or as text)
<input type="checkbox" name="docTxt" onChange="hideO n(
this.form.docTx t, 'asTextArea', 'asText' );"/>
</td>
<tr>
<tr id="asTextArea " style="visibili ty:visible" valign="baselin e">
<td nowrap align="right" valign="top">Te xtArea:</td>
<td align="left" valign="top">
<textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="visibili ty:hidden">
<td nowrap align="right" valign="top">Te xt:</td>
<td align="left" valign="top"><i nput type="text" name="bodyFile"
size="40" /></td>
</tr>
</table>
</form>
</body>
</html>

Jul 23 '05 #1

Subscribe Reply

1547

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="JavaS cript" >
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.getEle mentById(offId) ;
checkedDiv = document.getEle mentById(onId);
These should be local variables. Declare them with the var keyword.
if ( checkbox.checke d ) {
checkedDiv.styl e.visibility = 'visible';
checkedDiv.styl e.display = "block";
uncheckedDiv.st yle.visibility = 'hidden';
uncheckedDiv.st yle.display = "none";
} else {
checkedDiv.styl e.visibility = 'hidden';
checkedDiv.styl e.display = "none";
uncheckedDiv.st yle.visibility = 'visible';
uncheckedDiv.st yle.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.styl e.display = checkbox.checke d ? '' : 'none';
uncheckedDiv.st yle.display = !checkbox.check ed ? '' : '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.xmissio n.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>Untitl ed Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaS cript" >
<script type="text/javascript">
function hideOn( checkbox, offId, onId ) {
uncheckedDiv = document.getEle mentById(offId) ;
checkedDiv = document.getEle mentById(onId);
if ( checkbox.checke d ) {
checkedDiv.styl e.visibility = 'visible';
checkedDiv.styl e.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.styl e.display = "";

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

<body>
<form>
<table align="center">
<tr>
<td nowrap align="right" valign="top">&n bsp;
</td>
<td nowrap align="left" valign="top">As textarea (or as text)
<input type="checkbox" name="docTxt" onChange="hideO n(
this.form.docTx t, '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="hideO n(this,
'asTextArea', 'asText');">
</td>
<tr>
Should be </tr>
<tr id="asTextArea " style="visibili ty:visible" valign="baselin e">
<td nowrap align="right" valign="top">Te xtArea:</td>
<td align="left" valign="top">
<textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="visibili ty:hidden">
<td nowrap align="right" valign="top">Te xt:</td>
<td align="left" valign="top"><i nput 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>Untitl ed 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.getEle mentById(offId) ;
var checkedDiv = document.getEle mentById(onId);
if (checkbox.check ed) {
checkedDiv.styl e.display = "";
uncheckedDiv.st yle.display = "none";
} else {
checkedDiv.styl e.display = "none";
uncheckedDiv.st yle.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">T extArea:</td>
<td><textarea name="body" cols="50" rows="5"></textarea></td>
</tr>
<tr id="asText" style="display: none;" valign="top">
<td nowrap align="right">T ext:</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*****@agrico reunited.com>
comp.lang.javas cript 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.xmissio n.com...

A <tr> is not display:block, it is display:table-row, [...]
checkedDiv.styl e.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

Similar topics

29681

What does visibility: collapse really mean (and do)?

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 says: "The 'visibility' property takes the value 'collapse' for row, row group, column, and column group elements. This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to...

HTML / CSS

1460

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

6904

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

1367

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 it has been a lot of fun, but the way one must thing about things is very different from what I know and love:) I have worked though the "Walkthrough: Validating User Input in a Web Forms Page" and have my form, now I need to do something with...

ASP.NET

669

26220

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 paper written on this subject. On the Expressive Power of Programming Languages, by Matthias Felleisen, 1990. http://www.ccs.neu.edu/home/cobbe/pl-seminar-jr/notes/2003-sep-26/expressive-slides.pdf

Python

1743

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 will allow him to view the database window. And the button will only appear if the Administrator logs in. How can i set this up, I have only switched of the database window, and have done an external log file using a .txt file. This how far i have...

Microsoft Access / VBA

3642

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, hosted by a hosting company. Last week, all tables in MySQL suddenly disappeared and a "func" table is created there. I never create that table in my database. I asked the Hosting company what happened. The staff claimed that most probably my...

MySQL Database

2138

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 trasaction, esp those read actions, or even use another dbconnection to read? BTW, what does "open table" menas? Is that table only be "open" when someone read or write it. Once all user finish read or write the db table, the

C# / C Sharp

1696

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 the rows, writing them out to a file. This takes about 5 minutes until I close the reader. Whilst this is going on, I have another application that is trying to insert rows into the table. Normally, the inserts happen straight away, but when...

.NET Framework

9645

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9480

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10330

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9952

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6740

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5511

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4053

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3654

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2880

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General