focus-jquery를 사용하여 div를 확장하십시오.

Question

몇 주 후에 다시 방문하겠습니다. 이전에는 작동하지 않았으므로 지금은 기대하고 있습니다.

이 웹 사이트를 보시려면 오른쪽 상단의 뉴스 레터 등록 양식을 확인하십시오.

http://www.rattletree.com

내가 지금은 정확히 이런 식으로보고를 걸려 있지만, 상자에 사용자가 클릭 이메일 주소를 입력 할 때, 컨테이너 div가에 이메일 필드 위에 확장 (또는 간단히 표시됩니다) 또한 "이름"과 "도시"필드를 포함합니다.

jquery를 자유롭게 사용하고 있으므로 처분 할 수 있습니다. 이 양식은 등 몸 태그를 withing에 할 수없는 헤더 때문에 어떤 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; 
} 

도움 주셔서 감사합니다!

조엘

Answer 1

히야! 나는 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> 

스크립트

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

});