expand div with focus-jquery
Posted
by Joel
on Stack Overflow
See other posts from Stack Overflow
or by Joel
Published on 2010-05-04T18:55:53Z
Indexed on
2010/05/04
18:58 UTC
Read the original article
Hit count: 256
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.
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
© Stack Overflow or respective owner