expand div with focus-jquery
- by Joel
Hi guys,
I'm revisiting this after a few weeks, because I could never get it to work before, and hoping to now.
Please look at this website-notice the newsletter signup form at the top right.
http://www.rattletree.com
I am wanting it to look exactly this way for now, but when the user clicks in the box to enter their email address, the containing div will expand (or simply appear) above the email field to also include a "name" and "city" field.
I'm using jquery liberally in the sight, so that is at my disposal. This form is in the header so any id info, etc can't be withing the body tag...
This is what I have so far:
<div class="outeremailcontainer">
<div id="emailcontainer">
<?php include('verify.php'); ?>
<form action="index_success.php" method="post" id="sendEmail" class="email">
<h3 class="register2">Newsletter Signup:</h3>
<ul class="forms email">
<li class="email"><label for="emailFrom">Email: </label>
<input type="text" name="emailFrom" class="info" id="emailFrom" value="<?= $_POST['emailFrom']; ?>" />
<?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>';
?>
</li>
<li class="buttons email">
<button type="submit" id="submit">Send</button>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>
</form>
<div class="clearing">
</div>
</div>
css:
p.emailbox{
text-align:center;
margin:0;
}
p.emailbox:first-letter {
font-size: 120%;
font-weight: bold;
}
.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
/*background-color:#fff;*/
text-align:center;
/* margin:-50px 281px 0 auto ; */
float:right;
position:relative;
z-index:1;
}
form.email{
position:relative;
}
#emailcontainer {
margin:0;
padding: 0 auto;
z-index:1000;
display:block;
position:relative;
}
Thanks for any help!
Joel
