...

View Full Version : shifting submit button ...on a deadline ::biting nails::



webgirrrl1
11-18-2010, 02:58 AM
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. :)




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

MattF
11-18-2010, 03:18 AM
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.

webgirrrl1
11-18-2010, 07:39 AM
Thanks, Matt. I'm experimenting with that. :)

DJCMBear
11-18-2010, 09:39 AM
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.



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='';
}
}

webgirrrl1
11-18-2010, 07:48 PM
DJ, Thanks so much! I had to change the other section to display as well and it worked :)

DJCMBear
11-18-2010, 08:25 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum