...

View Full Version : Problem in MOZILLA in SHOW/HIDE table ROWS



eshban
12-20-2006, 02:36 PM
Hi, I have just write a code which show/hide rows. But it cannot runs in MOZILLA browser.

Just run it in MOZILLA and click on the radio button again and again, you can see that it loose its formatting. second row of table will be pushed towards right.

Please help in this regard.



Here is my code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<script>
function hidetable_second()
{
// document.getElementById('web_pg_name_caption').style.display = 'inline';
document.getElementById('newrow_2').style.display = 'none';
document.getElementById('newrow_3').style.display = 'none';
document.getElementById('myfile2').style.display = 'none';
document.getElementById('firstrow').style.display = 'block';

}


function hiderow(){

document.getElementById('newrow_2').style.display = 'none';
document.getElementById('myfile2').style.display = 'none';

document.getElementById('firstrow').style.display = 'none';

}



function hiderow_oneway()
{
document.getElementById('newrow_2').style.display = 'block';
document.getElementById('newrow_3').style.display = 'block';
document.getElementById('myfile2').style.display = 'block';
}
</script>

<body onload="hiderow()">

<table width="799px"border="2" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="2" align="center" width="799px" valign="top">
<input name="radiobutton" type="radio" value="roundtrip" onClick="hidetable_second()"> Create New Page
<input name="radiobutton" type="radio" value="oneway" onClick="hiderow_oneway()">Update Existing Page
</td>
</tr>

<TR id="firstrow">
<TD width="399px" valign="top">WebPage Name:
<input name="webpageName" type="text" value="mypage" id="web_pg_name_caption"></TD>
<TD id="new_t" width="400px" valign="top">WebPage Title:
<input name="webpageTitle" type="text" value="mypage_title" id="web_pg_name_title"></TD>
</TR>


<tr>
<td id="newrow_2" width="399px" valign="top">WebPage Path:&nbsp;&nbsp;</td>
<td id="newrow_3" width="400px" valign="top"><input type="file" name="myfile2" id="myfile2"></td>
</tr>
</table>

</body>
</html>

Arbitrator
12-20-2006, 07:09 PM
There are significant problems with your script. You’re targeting elements unnecessarily.

Errors:

The script element is in an invalid location (child of the html element). It should be inside the head or body elements.
The script element is missing a type attribute.
The “onClick” attribute does not exist in XHTML. All attribute names must be lowercase.
The input elements are not closed. All elements must be closed in XHTML.
The elements “TR” and “TD” do not exist in XHTML. All element names must be lowercase.
Table row elements cannot be children of other table row elements.
Element name and id attribute values must be identical; IDs are the modern form of names.
Units are not used on pixel length values in the width attribute. Use only an integer to indicate pixel values (with no “px” at the end). Note that this is the opposite of the CSS method where you must use a unit.

Other issues:

Use the modern form of the width attribite: the CSS width property.
Use the modern forms of the border attribute: the CSS border-color, border-width, border-style, and border properties.
Use the modern form of the cellspacing attribute: the CSS border-spacing and border-collapse properties.
Use the modern form of the cellpadding attribute: the CSS padding property.
Use the modern form of the align attribute: the CSS margin: 0 auto declaration and the text-align property.
Use the modern form of the valign attribute: the CSS vertical-align property.
In general, you can scrap the dated name attribute in favor of the id attribute since on the other elements they serve essentially the same function. Exceptions include radio button elements which need the name attribute to be considered grouped.
Use semantic code. Tables for layout are not semantic. Form labels are semantic.

This code addresses all of the above issues:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CF 103417 Revision B</title>

<!-- Tested: Firefox 2 and Internet Explorer 6/7 -->
<!-- This document does not consider users with CSS disabled. -->

<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
padding: 1em;
}
div {
width: 799px;
margin: 0 auto;
border: 2px solid;
}
fieldset {
border-width: 0;
padding: 0.2em;
}
*#selection, *#createNewPage {
border-bottom: 2px solid;
}
*#selection {
text-align: center;
}
*#createNewPage label, *#updateExistingPage label {
float: left;
width: 50%;
}
*.hidden {
display: none;
}
*.noBorder {
border-bottom: 0 none !important;
}
</style>

<script type="text/javascript">
function createNewPage() {
document.getElementById("createNewPage").className = "noBorder";
document.getElementById("updateExistingPage").className = "hidden";
}
function updateExistingPage() {
document.getElementById("createNewPage").className = "hidden";
document.getElementById("updateExistingPage").className = "noBorder";
}
window.onload = function() {
document.getElementById("selection").className = "noBorder";
document.getElementById("selection").onclick = function() {
this.className = "";
}
document.getElementById("radiobutton_1").onclick = createNewPage;
document.getElementById("radiobutton_2").onclick = updateExistingPage;
document.getElementById("createNewPage").className = "hidden";
document.getElementById("updateExistingPage").className = "hidden";
}
</script>

</head>
<body>

<div>
<fieldset id="selection" class="hidden">
<label>
<input type="radio" name="radiobutton" id="radiobutton_1"/>
Create New Page
</label>
<label>
<input type="radio" name="radiobutton" id="radiobutton_2"/>
Update Existing Page
</label>
</fieldset>
<fieldset id="createNewPage">
<label>
WebPage Name:
<input type="text" id="webpageName" value="mypage"/>
</label>
<label>
WebPage Title:
<input type="text" id="webpageTitle" value="mypage_title"/>
</label>
</fieldset>
<fieldset id="updateExistingPage">
<label for="myfile2">
WebPage Path:
</label>
<input type="file" id="myfile2"/>
</fieldset>
</div>

</body>
</html>

Note that I scrapped your table. However, to demonstrate that the code is the issue and not Mozilla, here’s the table version:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>CF 103417 Revision A</title>

<!-- Tested: Firefox 2 and Internet Explorer 6/7 -->
<!-- This document does not consider users with CSS disabled. -->

<style type="text/css">
table {
width: 799px;
margin: 0 auto;
border: 2px outset;
border-spacing: 0; /* This property is not supported by Internet Explorer. */
}
*#column_1 {
width: 399px;
}
*#column_2 {
width: 400px;
}
th, td {
border: 2px inset;
}
th {
text-align: center;
font-weight: normal;
}
td {
padding: 0;
vertical-align: top;
}
*.hidden {
display: none;
}
</style>

<script type="text/javascript">
function createNewPage() {
document.getElementsByTagName("tr")[1].className = "";
document.getElementsByTagName("tr")[2].className = "hidden";
}
function updateExistingPage() {
document.getElementsByTagName("tr")[1].className = "hidden";
document.getElementsByTagName("tr")[2].className = "";
}
window.onload = function() {
document.getElementsByTagName("tr")[0].className = "";
for (var i = 1; i < document.getElementsByTagName("tr").length; i++) {
document.getElementsByTagName("tr")[i].className = "hidden";
}
document.getElementById("radiobutton_1").onclick = createNewPage;
document.getElementById("radiobutton_2").onclick = updateExistingPage;
}
</script>

</head>
<body>

<table>
<col id="column_1"/>
<col id="column_2"/>
<tr class="hidden">
<th colspan="2">
<label>
<input type="radio" name="radiobutton" id="radiobutton_1"/>
Create New Page
</label>
<label>
<input type="radio" name="radiobutton" id="radiobutton_2"/>
Update Existing Page
</label>
</th>
</tr>
<tr>
<td>
<label>
WebPage Name:
<input type="text" id="webpageName" value="mypage"/>
</label>
</td>
<td>
<label>
WebPage Title:
<input type="text" id="webpageTitle" value="mypage_title"/>
</label>
</td>
</tr>
<tr>
<td>
<label for="myfile2">
WebPage Path:
</label>
</td>
<td>
<input type="file" id="myfile2"/>
</td>
</tr>
</table>

</body>
</html>

eshban
12-21-2006, 07:06 AM
thank you so much, but can i make this thing in simple HTML, because your code of XHTML is very complicated.

Arbitrator
12-21-2006, 06:20 PM
thank you so much, but can i make this thing in simple HTML, because your code of XHTML is very complicated.Yes. Here’s an HTML 4.01 Strict version of the table‐less version. The main differences:


Changed XHTML 1 Strict document type declaration to that of HTML 4.01 Strict.
Removed namespace pseudo‐attribute and XML lang attribute.
Removed XHTML closing slashes.
Added legend elements which are required in HTML fieldset elements.

The differences are minor, really.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CF 103417 Revision B2</title>

<!-- Tested: Firefox 2 and Internet Explorer 6/7 -->
<!-- This document does not consider users with CSS disabled. -->

<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
padding: 1em;
}
div {
width: 799px;
margin: 0 auto;
border: 2px solid;
}
fieldset {
border-width: 0;
padding: 0.2em;
}
*#selection, *#createNewPage {
border-bottom: 2px solid;
}
*#selection {
text-align: center;
}
*#createNewPage label, *#updateExistingPage label {
float: left;
width: 50%;
}
legend, *.hidden {
display: none;
}
*.noBorder {
border-bottom: 0 none !important;
}
</style>

<script type="text/javascript">
function createNewPage() {
document.getElementById("createNewPage").className = "noBorder";
document.getElementById("updateExistingPage").className = "hidden";
}
function updateExistingPage() {
document.getElementById("createNewPage").className = "hidden";
document.getElementById("updateExistingPage").className = "noBorder";
}
window.onload = function() {
document.getElementById("selection").className = "noBorder";
document.getElementById("selection").onclick = function() {
this.className = "";
}
document.getElementById("radiobutton_1").onclick = createNewPage;
document.getElementById("radiobutton_2").onclick = updateExistingPage;
document.getElementById("createNewPage").className = "hidden";
document.getElementById("updateExistingPage").className = "hidden";
}
</script>

</head>
<body>

<div>
<fieldset id="selection" class="hidden">
<legend>Select: Create New or Update Existing Page</legend>
<label>
<input type="radio" name="radiobutton" id="radiobutton_1">
Create New Page
</label>
<label>
<input type="radio" name="radiobutton" id="radiobutton_2">
Update Existing Page
</label>
</fieldset>
<fieldset id="createNewPage">
<legend>Create New Page</legend>
<label>
WebPage Name:
<input type="text" id="webpageName" value="mypage">
</label>
<label>
WebPage Title:
<input type="text" id="webpageTitle" value="mypage_title">
</label>
</fieldset>
<fieldset id="updateExistingPage">
<legend>Update Existing Page</legend>
<label for="myfile2">
WebPage Path:
</label>
<input type="file" id="myfile2">
</fieldset>
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum