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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question shifting submit button ...on a deadline ::biting nails::

    Thanks to all of you who helped with the previous problems I was having with this form.

    I need to figure out is why is the submit ("continue") button moving when "auto" is selected (under "Select Your Move Type") and how to fix it.

    See: http://www.dvdgalleria.com/form/TEST_DIVsCENTERED.html

    It doesn't look like a CSS problem as far as I can tell.

    Any pointers would be so appreciated! I have to finish it by tonight!

    Thanks in advance.


    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">
    <head>
    
    
    <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 {
    	float:left;
    	height: 37px;
    }
    .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');
            document.getElementById('residence_type').style.display='none';
            document.getElementById('num_rooms').style.display='none';
            }
        else{
        	hide('vehicle');
            document.getElementById('residence_type').style.display='';
            document.getElementById('num_rooms').style.display='';
            }
    }
    
    
    </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="arrow.gif" alt="" /></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" style="height:40px;">
                <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="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> &ndash; Our network consists of only fully licensed and insured movers.</div>
              <div class="quality"><strong>Quality</strong> &ndash; All our moving companies must pass our strict 28-point inspection process to insure quality service.</div>
              <div class="security"><strong>Security</strong> &ndash; 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>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Code:
    	if(optionValue=='auto'){
        	show('vehicle');
            document.getElementById('residence_type').style.display='none';
            document.getElementById('num_rooms').style.display='none';
            }
    You're using hidden/visible for the auto inputs so they always take up the same space whether they are visible or not. The display: none means that the other options technically disappear from the page completely, (including any space they occupied), when you toggle the inputs.
    Last edited by MattF; 11-18-2010 at 04:21 AM.

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, Matt. I'm experimenting with that.

  • #4
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    It's because you are using the element 'visibility' as this just hides the html element but the element is still on the page, if you use the element 'display' this will remove the element fully from the page when it isn't needed and adds it back in when it is, so like this.

    Code:
    function show_auto(optionValue) {
      if(optionValue == 'auto') {
        document.getElementById('vehicle').style.display = '';
        document.getElementById('residence_type').style.display = 'none';
        document.getElementById('num_rooms').style.display = 'none';
      } else {
        document.getElementById('vehicle').style.display = 'none';
        document.getElementById('residence_type').style.display='';
        document.getElementById('num_rooms').style.display='';
      }
    }
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    DJ, Thanks so much! I had to change the other section to display as well and it worked

  • #6
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Quote Originally Posted by webgirrrl1 View Post
    DJ, Thanks so much! I had to change the other section to display as well and it worked
    No Problem, plus the code I wrote merged all the functions you had into one function as you don't need the show and hide functions as you can do it in the one function like i did.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  

    Posting Permissions

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