Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Location
    Lahore, Pakistan
    Posts
    150
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem in MOZILLA in SHOW/HIDE table ROWS

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

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    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:
    Code:
    <!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:
    Code:
    <!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>
    Last edited by Arbitrator; 12-21-2006 at 05:15 PM. Reason: Made document make more sense when JavaScript is disabled and changed encoding.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #3
    Regular Coder
    Join Date
    Apr 2005
    Location
    Lahore, Pakistan
    Posts
    150
    Thanks
    2
    Thanked 0 Times in 0 Posts
    thank you so much, but can i make this thing in simple HTML, because your code of XHTML is very complicated.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by eshban View Post
    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.

    Code:
    <!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>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •