SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS display:none

    Hello all,
    What I am trying to achieve is to have a drop down menu that displays other fields based on what is selected. In this example I want to ask the end user to select a carrier (FedEx, UPS, etc), but there is an "other" option for freight carriers. If they select "other" I want to show another text field where I would collect the freight carrier's name. The field starts as invisible using the CSS display set to none property. The problem I am having is that it does not start hidden and I cannot get it to go away so I can display it when needed. Any other ideas on how to achieve this are greatly appreciated.

    Thanks in advance for the help.

    This is my code:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>TSRI's Ready To Ship</title>
    
    <link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css" />
    
    <!--[if IE 5]>
    
    <style type="text/css"> 
    
    /* place css box model fixes for IE 5* in this conditional comment */
    
    .thrColFixHdr #sidebar1 { width: 180px; }
    
    .thrColFixHdr #sidebar2 { width: 190px; }
    
    </style>
    
    <![endif]--><!--[if IE]>
    
    <style type="text/css"> 
    
    /* place css fixes for all versions of IE in this conditional comment */
    
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    
    .thrColFixHdr #mainContent { zoom: 1; }
    
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    
    </style>
    
    <![endif]-->
    
    
    
    <SCRIPT LANGUAGE="JavaScript">
    
    
    
    function validate() 
    
    {
    
    	var billing			=	document.getElementById('billing');
    
    	var carrier			=	document.getElementById('carrier');
    
    	var deliveryType	=	document.getElementById('deliveryType');
    
    	
    
    	if(madeSelection(billing, 		"Please select billing type")){
    
    	if(madeSelection(carrier, 		"Please select a carrier")){
    
    	if(madeSelection(deliveryType, 	"Please select the delivery type")){
    
    
    
    	return true;
    
    
    
    	}}}
    
    
    
    	return false;
    
    	
    
    	function madeSelection(elem, helperMsg)
    
    	{
    
    		if(elem.value == "select")
    
    		{
    
    			alert(helperMsg);
    
    			elem.focus();
    
    			return false;
    
    		}
    
    		else
    
    		{
    
    			return true;
    
    		}
    
    	}
    
    }
    
    
    
    function unhide(divID) 
    
    {
    
     	var item = document.getElementById(divID);
    
     	
    
    	if(item) 
    
    	{
    
     		item.className=(item.className=='hidden')?'unhidden':'hidden';
    
     	}
    
    }
    
    
    
    </SCRIPT>
    
    
    
    </head>
    
    
    
    <body class="thrColFixHdr">
    
    
    
    <div id="container">
    
    <div id="header">
    
    <img src="images/banner3.png" width="1000" height="150" alt="Ready To Ship!" />	
    
    </div>
    
    <!-- end #header -->
    
    <div id="sidebar1">
    
    <p><strong>You are logged on as Francisco Carpio</strong></p>    <p><a href="Step1_shipmentType.php">Generate Shipment</a></p>
    
        <p><a href="reports.php">My Transactions</a></p>
    
    <p><a href="retrievepwd.php">Reset Password</a></p>
    
    
    
        <p><strong>My Address Book</strong></p>
    
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addressBook.php">Select</a></p>
    
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrNew.php">Add New</a></p>
    
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrEdit.php">Edit</a></p>
    
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrRemove.php">Remove</a></p>
    
            <p><strong>EH&amp;S Approvals</strong>&nbsp;(0)</p>
    
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=BIO">Biological</a></p>
    
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>
    
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=RAD">Radiological</a></p>
    
    
    
         	<p><strong>S&amp;R Main</strong>&nbsp;(0)</p>
    
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrGetTrack.php">Enter Tracking #'s</a></p>
    
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrSearch.php">Search</a></p>
    
         	<p><strong>Admin</strong></p>
    
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="stats.php">Stats</a></p>
    
            <p><strong>Logoff</strong></p>
    
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="logoff.php">Logoff</a></p>
    
    <!-- end #sidebar1 -->
    
    </div>
    
    <div id="sidebar2">
    
    <h2>some output goes here</h2>  <!-- end #sidebar2 --></div>
    
      <div id="mainContent">
    
        <h1>Shipping Options</h1>
    
        <form id="form1" name="form1" method="post" action="Step6_itemsShipped.php" onSubmit="return validate()">
    
        <table width="575" border="0" cellspacing="1" cellpadding="1">
    
        <tr>
    
        <th colspan="2"><p>Enter Shipping Options</p></th>
    
        </tr>
    
          <tr>
    
            <td width="30%"><p>Billing:</p></td>
    
            <td width="70%">
    
              <p>
    
                <label for="billing"></label>
    
                <select name="billing" id="billing" tabindex="1">
    
                <option value="select" selected>Select</option>
    
                <option value="Sender">Bill Sender</option>
    
                <option value="Recipient">Bill Recipient</option>
    
                <option value="3rd Party">Bill Third Party</option>
    
                </select>
    
              </p></td>
    
          </tr>
    
          <tr>
    
            <td><p>Carrier:</p></td>
    
            <td><p>
    
              <label for="carrier"></label>
    
              <select onchange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
    
              	<option value="select" selected>Select</option>
    
              	<option value="FedEx">FedEx</option>
    
              	<option value="UPS">UPS</option>
    
              	<option value="DHL">DHL</option>
    
              	<option value="USPS">USPS</option>
    
              	<option value="other">Other</option>
    
              </select>
    
            </p></td>
    
          </tr>
    
          <div id="other" class="hidden">
    
          <tr>
    
            <td><p>Carrier Name:</p></td>
    
            <td><input type="text" name="carrierName" id="carrierName" tabindex="3" /></td>
    
          </tr>
    
    	  </div>	
    
          <tr>
    
            <td><p>Carrier Account No.:</p></td>
    
            <td><p>
    
              <label for="carrierAcc"></label>
    
              <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
    
            </p></td>
    
          </tr>
    
          <tr>
    
            <td><p>Delivery Type:</p></td>
    
            <td><p>
    
              <label for="deliveryType"></label>
    
              <select name="deliveryType" id="deliveryType" tabindex="5">
    
              <option value="select" selected>Select</option>
    
              <option value="Overnight">Overnight</option>
    
              <option value="2-Day">2 Day</option>
    
              <option value="3-Day">3 Day</option>
    
              <option value="Ground">Ground</option>
    
              </select>
    
            </p></td>
    
          </tr>
    
          <tr>
    
            <td><p>Notes:</p></td>
    
            <td><p>
    
              <label for="notes"></label>
    
              <textarea name="notes" id="notes" cols="45" rows="5" tabindex="6"></textarea>
    
            </p></td>
    
          </tr>
    
        </table>
    
    
    
        <p><input type="submit" name="next" id="next" value="Next" tabindex="6" />
    
        </p>
    
        </form>
    
    	<!-- end #mainContent --></div>
    
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    
    <div id="footer">
    
      <p>Footer message goes here</p>
    
    <!-- end #footer --></div>
    
    <!-- end #container --></div>
    
    </body>
    
    </html>
    Sorry for the extra lines in the code, I don't know how they got there.

  2. #2
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just as an FYI, there is something in my code that is messing up the hidden property. When I isolate the code it works well. I have tried to remove parts of the code to try to determine what is messing things up with no success.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is really a javascript question (especially as you didn't show any css anwyay ).

    You can't however wrap a div around a table-row as that is invalid and won't work. You need to hide and show the table row instead (although forms aren't really tabular data and table-free would have been easier.)

    Apply the class to the table-row instead of a div as follows.
    Code:
    <tr>
                        <td><p>Carrier:</p></td>
                        <td><p>
                                <label for="carrier"></label>
                                <select onChange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
                                    <option value="select" selected>Select</option>
                                    <option value="FedEx">FedEx</option>
                                    <option value="UPS">UPS</option>
                                    <option value="DHL">DHL</option>
                                    <option value="USPS">USPS</option>
                                    <option onclick="unhide('other')" value="other">Other</option>
                                </select>
                            </p></td>
                    </tr>
                        <tr id="other" class="hidden">
                            <td><p>Carrier Name:</p></td>
                            <td><input type="text" name="carrierName" id="carrierName" tabindex="3" /></td>
                        </tr>
                    <tr>
                        <td><p>Carrier Account No.:</p></td>
                        <td><p>
                                <label for="carrierAcc"></label>
                                <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
                            </p></td>
                    </tr>
    Then I assume you will have some css like this (or you should have some css like this).

    Code:
    .hidden{display:none}
    .unhidden{display:block}/*ie6/7*/
    .unhidden{display:table-row}
    Then you could hide the row when the option is clicked.

    Code:
    <td><p>
                                <label for="carrier"></label>
                                <select onChange="unhide(this);" name="carrier" id="carrier" tabindex="2" >
                                    <option value="select" selected>Select</option>
                                    <option value="FedEx">FedEx</option>
                                    <option value="UPS">UPS</option>
                                    <option value="DHL">DHL</option>
                                    <option value="USPS">USPS</option>
                                    <option onclick="unhide('other')" value="other">Other</option>
                                </select>
                            </p></td>
    However, I guess you have some sort of validation script to catch when the select is clicked anyway and then use its value to check whether to open the table-row up.

    You need to be careful changing the class on an element without checking whether the element has multiple classes or not as you could inadvertently delete a class that was needed.

    If you need further help I'll move this to the JS forum for better advice.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Also the doctype you are using will make IE go into quirks mode and use the broken box model among other things. Use a full valid doctype.

    It seems you have a page that is xhtml transitional anyway but you are using an old htm4.01 doctype without uri.

    The xhtml transitional doctype is this:

    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=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    </body>
    </html>
    Although these days you should really be using strict.

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul. The <tr> is hidden now but the JavaScript is not triggering it to reappear when the "other" option is selected. I will appreciate it if you could move this post to the JS forum. Maybe they could help me with the JavaScript there.

    Thanks again,

    FC

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you include the JS you were using to trigger the showing of the extra content?

    If you post the full script then I'll move this to the JS forum. (Using the temporary onclick method I showed above shows that it will work if implemented correctly).

  7. #7
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, here is the full JS for this:

    Code:
    function unhide(divID) 
    {
     	var item = document.getElementById(divID);
     	
    	if(item) 
    	{
     		item.className=(item.className=='hidden')?'unhidden':'hidden';
     	}
    }
    The rest of my JS is in my original post. I wanted to call this from the onchange on my drop down menu. As usual, I am open to new (better) ideas.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fcarpio View Post
    Thank you, here is the full JS for this:

    Code:
    function unhide(divID) 
    {
         var item = document.getElementById(divID);
         
        if(item) 
        {
             item.className=(item.className=='hidden')?'unhidden':'hidden';
         }
    }
    The rest of my JS is in my original post. I wanted to call this from the onchange on my drop down menu. As usual, I am open to new (better) ideas.
    I'll move it to the JS forum now as your onchange event is all wrong as you don't have an id to work with and you aren't detecting which option element was changed. If you add my onclick code to the option element you will see that it is working but obviously is not the best way to do this.

  9. #9
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I now have it sort of working but the browser is rendering the table in a funny way.

    It should look like (I got this by removing the tbody tags so that may be the problem):



    But it looks like (with the tbody tags):



    This is the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TSRI's Ready To Ship</title>
    <link href="css/thrColFixHdr.css" rel="stylesheet" type="text/css" />
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .thrColFixHdr #sidebar1 { width: 180px; }
    .thrColFixHdr #sidebar2 { width: 190px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
    .thrColFixHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    
    <SCRIPT LANGUAGE="JavaScript">
    
    function validate() 
    {
    	var billing			=	document.getElementById('billing');
    	var carrier			=	document.getElementById('carrier');
    	var deliveryType	=	document.getElementById('deliveryType');
    	
    	if(madeSelection(billing, 		"Please select billing type")){
    	if(madeSelection(carrier, 		"Please select a carrier")){
    	if(madeSelection(deliveryType, 	"Please select the delivery type")){
    
    	return true;
    
    	}}}
    
    	return false;
    	
    	function madeSelection(elem, helperMsg)
    	{
    		if(elem.value == "select")
    		{
    			alert(helperMsg);
    			elem.focus();
    			return false;
    		}
    		else
    		{
    			return true;
    		}
    	}
    }
    
    function display(obj,id1) 
    {
    	txt = obj.options[obj.selectedIndex].value;
    	document.getElementById(id1).style.display = 'none';
    	/*document.getElementById(id2).style.display = 'none';*/
    	
    	if(txt.match(id1)) 
    	{
    		document.getElementById(id1).style.display = 'block';
    	}
    	/*if(txt.match(id2)) 
    	{
    		document.getElementById(id2).style.display = 'block';
    	}*/
    }
    </SCRIPT>
    
    </head>
    <body class="thrColFixHdr">
    <div id="container">
    <div id="header">
    <img src="images/banner3.png" width="1000" height="150" alt="Ready To Ship!" />	
    </div>
    <!-- end #header -->
    <div id="sidebar1">
    <p><strong>You are logged on as Francisco Carpio</strong></p>    <p><a href="Step1_shipmentType.php">Generate Shipment</a></p>
        <p><a href="reports.php">My Transactions</a></p>
    <p><a href="retrievepwd.php">Reset Password</a></p>
        <p><strong>My Address Book</strong></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addressBook.php">Select</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrNew.php">Add New</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrEdit.php">Edit</a></p>
        <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="addrRemove.php">Remove</a></p>
            <p><strong>EH&amp;S Approvals</strong>&nbsp;(0)</p>
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=BIO">Biological</a></p>
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=CHEM">Chemical</a></p>
    	<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="ehsApprovals.php?transType=RAD">Radiological</a></p>
         	<p><strong>S&amp;R Main</strong>&nbsp;(0)</p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrGetTrack.php">Enter Tracking #'s</a></p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="snrSearch.php">Search</a></p>
         	<p><strong>Admin</strong></p>
    		<p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="stats.php">Stats</a></p>
            <p><strong>Logoff</strong></p>
            <p>&nbsp;&nbsp&nbsp;&nbsp;&nbsp;<a href="logoff.php">Logoff</a></p>
    <!-- end #sidebar1 -->
    </div>
    <div id="sidebar2">
    <h2>some output goes here</h2>  <!-- end #sidebar2 --></div>
      <div id="mainContent">
        <h1>Shipping Options</h1>
        <form id="form1" name="form1" method="post" action="Step6_itemsShipped.php" onSubmit="return validate()">
        <table width="575" border="0" cellspacing="1" cellpadding="1">
        <tr>
        <th colspan="2"><p>Enter Shipping Options</p></th>
        </tr>
          <tr>
            <td width="30%"><p>Billing:</p></td>
            <td width="70%">
              <p>
                <label for="billing"></label>
                <select name="billing" id="billing" tabindex="1">
                <option value="select" selected>Select</option>
                <option value="Sender">Bill Sender</option>
                <option value="Recipient">Bill Recipient</option>
                <option value="3rd Party">Bill Third Party</option>
                </select>
              </p>
              </td>
          </tr>
          <tr>
            <td><p>Carrier:</p></td>
            <td><p>
              <label for="carrier"></label>
              <select name="carrier" id="carrier" tabindex="2" onchange="display(this,'other');">
              	<option value="select" selected>Select</option>
              	<option value="FedEx">FedEx</option>
              	<option value="UPS">UPS</option>
              	<option value="DHL">DHL</option>
              	<option value="USPS">USPS</option>
              	<option value="other">Other</option>
              </select>
            </p>
            </td>
          </tr>
          
          <tbody id="other" style="display: none;">
          <tr>
            <td><p>Carrier Name:</p></td>
            <td><p><input type="text" name="carrierName" id="carrierName" tabindex="3" /></p></td>
          </tr>
          </tbody>
          
          <tr>
            <td><p>Carrier Account No.:</p></td>
            <td><p>
              <label for="carrierAcc"></label>
              <input type="text" name="carrierAcc" id="carrierAcc" tabindex="4" />
            </p></td>
          </tr>
          <tr>
            <td><p>Delivery Type:</p></td>
            <td><p>
              <label for="deliveryType"></label>
              <select name="deliveryType" id="deliveryType" tabindex="5">
              <option value="select" selected>Select</option>
              <option value="Overnight">Overnight</option>
              <option value="2-Day">2 Day</option>
              <option value="3-Day">3 Day</option>
              <option value="Ground">Ground</option>
              </select>
            </p></td>
          </tr>
          <tr>
            <td><p>Notes:</p></td>
            <td><p>
              <label for="notes"></label>
              <textarea name="notes" id="notes" cols="45" rows="5" tabindex="6"></textarea>
            </p></td>
          </tr>
        </table>
    
        <p><input type="submit" name="next" id="next" value="Next" tabindex="6" />
        </p>
        </form>
    	<!-- end #mainContent --></div>
    	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
    <div id="footer">
      <p>Footer message goes here</p>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I gave you the answer in my other post with those css classes.

    When you hide it with display:none you must show it with display:table-row not display:block otherwise you change it to a block element and is no longer a table-row.

    However, IE still needs display:block.

    You can get around it by doing this instead.

    Code:
    function display(obj,id1) 
    {
        txt = obj.options[obj.selectedIndex].value;
        document.getElementById(id1).style.display = 'none';
        /*document.getElementById(id2).style.display = 'none';*/
        
        if(txt.match(id1)) 
        {
            document.getElementById(id1).style.display = '';
        }
        /*if(txt.match(id2)) 
        {
            document.getElementById(id2).style.display = 'block';
        }*/
    }

  11. #11
    SitePoint Member
    Join Date
    May 2011
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works.

    Thank you and have a nice long Memorial day weekend (assuming you are in the USA),

    FC


Bookmarks

Posting Permissions

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