I'm a total n00b, but I managed to get halfway with getting this to work. The problem is showing and hiding two elements on a form at the same time. What needs to happen (see attached file): 1- When "auto" is selected under "Select your move type", the Vehicle section should appear. (this works) 2- This event above should also hide the "Residence type" select element 3- Ideally, the Vehicle element should move up and take up the spot where residence type was. I want to keep the code it as simple as possible so that I can learn from it. Any help would be so appreciated!
You can assign an ID to the element then use the ID to hide it. document.getElementById('TheIdHere').style.display = 'none'; // to hide document.getElementById('TheIdHere').style.display = 'block'; // to show Code (markup): It works exactly like CSS's 'display' property. So you can assign other values that the 'display' property on css accepts.
Thanks, Senix. I guess I need help with putting it all together! Basically once option "auto" is selected under id="move_type", id="vehicle" must show up (I have this part working already) && id="residence_type" must hide (the part that needs help). id="vehicle" needs to move up into the same exact position as "residence_type" In the script, I've used 'visible' and 'hidden' properties for getting id="vehicle" to show up. Now I need to make "residence_type" disappear and have "vehicle" move into position.
<!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"> <head> <title>Centered Element of unknown height and width</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="main.css" rel="stylesheet" type="text/css" /> <!--[if IE ]> <link href="iecss_DELETE.css" rel="stylesheet" type="text/css" /> <![endif]--> <style type="text/css"> /* zero out margins */ * { margin:0; padding:0 } /* mac hide \*/ html, body { height:100%; width:100%; } /* end hide */ body { text-align:center; min-height:300px;/* for ie7*/ font-family:Arial, Helvetica, sans-serif; font-size:.85em; } #xouter { height:100%; width:100%; display:table; vertical-align:middle; } #xcontainer { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 300px; } #xinner { width: 453px; background:#fff; height: 300px; text-align: left; margin-left:auto; margin-right:auto; background: url(web_developer_test_blank.jpg) no-repeat center; } /* not required for demo */ p, h1 { margin-bottom:1em } #header { margin-right:0 } .maintxt { text-align:left; margin:1em; } .formItem { height:42px; float:left; } .em1 { font-size:1em; } .em95 { font-size:.95em; } .em9 { font-size:.9em; } .em85 { font-size:.85em; } .em8 { font-size:.8em; } .em75 { font-size:.75em; } .select { font-style:italic; } .start_quotes { font-style:italic; font-weight:bold; color:#6a8da9; font-size:1.35em; text-align: left; margin-left: 25px; margin-top: 15px; float:left; position:relative; width:100%; } #the_difference_box { float:right; width:165px; text-align: left; border: 1px solid #d5e2ea; margin-top: -55px; line-height: 1.1em; font-family: Arial, Helvetica, sans-serif; color:#383838; background-color: #fff; padding: 8px 10px 15px 12px; margin-right: 15px; height: 212px; } .the_difference { font-size:1em; font-weight:bold; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; margin-top:2px; } .safety, .quality, .security, .privacy, zipcode_finder { margin-bottom:8px; font-size: .8em; } .safety { margin-top:5px; } .security { margin-bottom:3px; } .which_is_right, .zipcode_finder { font-size: 0.75em; float: right; margin-left: -10px; } .which_is_right, .privacy { color:#2b5774; text-decoration:underline; margin: 0; } a:link, a:visited, a:active { color:#2b5774; } #wrapper_form { width:453px; float: left; } #main_form { width:220px; float:left; padding-left: 25px; height: 238px; padding-top: 8px; margin-top: -66px; } input { color: #999; background: #fff; border: 1px solid #06c; border-color: #06C; font-style: italic; height:20px; } .approximate { color: #777; font-size: 0.85em; } .submit input { color: #000; background: #ffa20f; border: 2px outset #d7b9c9 } select { color: #999; border: 1px solid #666699; } label { color:#444; font-size:.85em; font-family:Arial, Helvetica, sans-serif; font-weight:bold; } .continue_button { float:left; position:relative; } #arrow { position:relative; top:-17px; /* -18 for gecko */ left:-27px; width: 28px; height: 66px; } #move_type { width:100px; } #move_type_id { width:220px; } #year, #make, #model { width:70px; } #residence_Type { width:100px; } </style> <!--[if lt IE 8]> <style type="text/css"> #xouter{display:block} #xcontainer{top:50%;display:block} #xinner{top:-50%;position:relative} </style> <![endif]--> <!--[if IE 7]> <style type="text/css"> #xouter{ position:relative; overflow:hidden; } </style> <![endif]--> <script type="text/javascript"> function hide(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'hidden'; } function show(obj) { obj1 = document.getElementById(obj); obj1.style.visibility = 'visible'; } function show_auto(optionValue) { if(optionValue=='auto'){show('vehicle');}else{hide('vehicle');} } function hide_residence(optionValue) { if(optionValue=='vehicle'){hide('residence_type');}else{show('residence_type');} } document.getElementById('residence_type').style.display = 'none'; // to hide document.getElementById('num_rooms').style.display = 'none'; // display: block (to show) </script> </head> <body onload=hide('vehicle');> <div id="xouter"> <div id="xcontainer"> <div id="xinner"> <div class="start_quotes">Start getting your free moving quotes</div> <div id="wrapper_form"> <div id="arrow"><img src="Fireworks_image/arrow.gif" /></div> <form action="#" id="main_form"> <div id="move_type_id" class="formItem"> <label for="move_type">Select Your Move Type<br /> <select id="move_type" name="move_type" onchange="show_auto(this.value)"> <option value="">Select</option> <option value="full">Full</option> <option value="self">Self</option> <option value="auto">Auto</option> </select> </label> <div class="which_is_right"><a href="#">Which is right for me?</a></div> </div> <div class="formItem" style="clear:left;"> <label for="moving_from" id="moving_from">Move Date <span class="approximate">(approximate)</span><br /> <input type="text" name="move_date_month" size="12" maxlength="10" value="Month" style="display:inline-block;float:left; margin-right:6px;" /> <input type="text" name="move_date_day" size="3" maxlength="2" value="Day" /> </label> </div> <div class="formItem" style="clear:left;"> <label for="moving_from" class="moving_from">Moving From<br /> <input type="text" name="Moving_From" size="12" maxlength="5" value="Zipcode" style="display:inline-block;float:left;"/> </label> </div> <div class="formItem" style="margin-left:6px;"> <label for="moving_to" class="moving_to">Moving to<br /> <input type="text" name="Moving_To" size="12" maxlength="5" value="Zipcode" /> </label> </div> <div style="width:150px; margin-left:10px; padding-top:5px;"> <div class="zipcode_finder" style="float:left; height:14px; padding-top:2px;"><a href="">Zipcode Finder</a></div><div class="zipcode_finder" style="float:left; height:14px; padding-top:2px; margin-left:19px;"><a href="">Zipcode Finder</a></div> </div> <div style="clear:both;"></div> <div id="residence_type" class="formItem"> <label for="residence_type">Residence type<br /> <select name="residence_type" id="residence_Type" /> <option value="select" selected="selected" class="select">Select</option> <option>Apartment</option> <option value="year">Condo</option> <option value="year">Single Family</option> </select> </label> </div> <div id="num_rooms" class="formItem" style="margin-left:6px;"> <label for="num_rooms"># of Rooms<br /> <select name="num_rooms" id="num_rooms_sel" /> <option value="Select" selected="selected" class="select">Select</option> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> </label> </div> <div id="vehicle" class="formItem"> <label for="vehicle"> Vehicle<br /> <select name="year" id="year" /> <option>Year</option> <option value="year">year</option> </select> <select name="make" id="make" /> <option>Make</option> <option value="make">make</option> </select> <select name="model" id="model" /> <option>Model</option> <option value="model">model</option> </select> </label> </div> <div class="continue_button"> <a href="javascript:document.myform.submit()" onmouseover="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'" onmouseout="document.myform.sub_but.src='Fireworks_image/btn_continue_s1.gif'" onclick="return val_form_this_page()"> <img src="Fireworks_image/btn_continue_s1.gif" border="0" alt="Submit this form" name="sub_but" align="left" /> </a> </div> </form> <div id="the_difference_box"> <div class="the_difference">The Difference</div> <div class="safety"><strong>Safety</strong> – Our network consists of only fully licensed and insured movers.</div> <div class="quality"><strong>Quality</strong> – All our moving companies must pass our strict 28-point inspection process to insure quality service.</div> <div class="security"><strong>Security</strong> – GigaMoves does not permit moving companies to broker or sell customer information.</div> <div class="privacy"><a href="#">Privacy Policy</a></div> </div> <!-- end wrapper_form --> </div> </div> </div> </div> </body> </html> Code (markup):