expand div with focus-jquery

Question

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

Пожалуйста, ознакомьтесь с этим сайтом - обратите внимание на форму регистрации информационного бюллетеня в правом верхнем углу.

http://www.rattletree.com

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

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

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

<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

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

HTML (я раздели РНР для демо)

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

Script

$(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(); 
    }); 

});