расширить div с помощью focus-jquery

Question

Я вернусь к этому через несколько недель, потому что никогда не мог заставить его работать раньше, и надеюсь сейчас.

Пожалуйста, посмотрите на этот сайт - обратите внимание на форму подписки на рассылку в правом верхнем углу.

http://www.rattletree.com

Сейчас я хочу, чтобы он выглядел именно так, но когда пользователь нажимает в поле, чтобы ввести свой адрес электронной почты, содержащийся div будет расширяться (или просто появляться) над полем электронной почты, чтобы также включить «имя» и "городское" поле.

Я свободно использую jquery в прицеле, так что это в моем распоряжении. Эта форма находится в заголовке, поэтому любые идентификаторы и т. Д. Не могут быть внутри тега body ...

Это то, что я имею до сих пор:

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

Спасибо за любую помощь!

Joel

Answer 1

Хийя! Я разместил демо для вас. В основном дополнительные входы находятся внутри формы, но скрыты. Когда вы фокусируете внимание на вводе электронной почты, скрытые элементы раскрываются. Я раскрыл их с помощью функции .slideDown(), но вы можете заменить ее любой анимацией. Я также добавил наложение, которое появляется под полем ввода, вы можете настроить CSS, чтобы сделать его полностью прозрачным, если вы хотите, потому что реальная цель наложения заключается в том, чтобы скрыть дополнительные вводы при нажатии на них.

HTML (я удалил php для демонстрации)

<div class="outeremailcontainer">
 <div id="emailcontainer">
  <form action="index_success.php" method="post" id="sendEmail" class="email">
   <h3 class="register2">Newsletter Signup:</h3>
   <ul class="forms email">
    <li class="name"><label for="yourName">Name: </label>
     <input type="text" name="yourName" class="info" id="yourName" value=" " /><br>
    </li>

    <li class="city"><label for="yourCity">City: </label>
     <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br>
    </li>

    <li class="email"><label for="emailFrom">Email: </label>
     <input type="text" name="emailFrom" class="info" id="emailFrom" value=" " />
    </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>

Сценарий

$(document).ready(function(){

 $('#emailFrom')
  .focus(function(){
   if ($('#overlay').length) { return; } // don't keep adding overlays if one exists
   $('#sendEmail')
    .css({ backgroundColor: '#ddd' })
    .find('.name, .city').slideDown(300, function(){ $(this).show(); }); // added so this works in IE
   $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 });
   $('<div id="overlay"></div>').appendTo('body');
  });

 $('#overlay').live('click', function(){
   $('#sendEmail')
    .css({ backgroundColor : 'transparent' })
    .find('.name, .city').slideUp(300);
   $('.outeremailcontainer').css({ position : 'static' });
   $('#overlay').remove();
  });

});