jQuery - 다른 요소에 플로팅 요소 스틱 만들기

Question

this jQuery 폼 유효성 검사 플러그인을 사용하고 있습니다. 작은 플로팅 div에서 필드 오류를 보여줍니다.

오류 div가 표시되고 해당 요소가 원래 위치에서 벗어나는 경우 문제가 발생합니다. 예를 들어 이전에 숨겨져 있던 요소를 입력 상자 I.Show() 위에 놓으면 입력을 내리지 만 그 입력에 대한 오류 프롬프트는 그대로 유지됩니다.

플로팅 div 스틱을 해당 요소 다음에 오도록 만들 수 있습니까?

이 플러그인의 코드는 here이고 예로는 here입니다.

Answer 1

플러그인이 오류 메시지에 절대 위치 지정을 사용 중입니다.

입력 필드 위치를 문서에 상대적으로 이동시키는 다른 DOM 요소를 추가하는 경우 DOM 실행을 수정하는 스크립트 다음에 <div>의 모든 유효성을 수동으로 다시 조정해야합니다. 당신은 jQuery를 오프셋을 사용하여 시도 할 수

() 메소드 http://api.jquery.com/offset/는 문서에 입력 요소 상대의 새로운 위치를 얻고, 그에 따라 검증을 < 사업부 >의 위쪽 및 왼쪽 속성을 조정할 수 있습니다. 여기

무슨 뜻인지를 보여주는 .jsFiddle입니다 : http://jsfiddle.net/ysQCf/2/

CSS

.errorMessage 
{ 
    background-color: red; 
    position: absolute; 
    left: 180px; 
    top: 25px; 
} 

p 
{ 
    display: none; 
} 

HTML

<p id="hidden">if you display this the textbox will move down</p> 
<input id="myInput" type="text" /> 
<div class="errorMessage">stick me to the div</div> 
<br /> 
<input id="show" type="button" value="Show" /> 

자바 스크립트

$(function() { 
    $("#show").click(function() { 
     // Save the offset of the error against the input 
     var offset = $(".errorMessage").offset(); 
     offset.left -= $("#myInput").offset().left; 
     offset.top -= $("#myInput").offset().top; 

     // Call your script to manipulate the DOM 
     $("#hidden").show(); 

     // Move the error div to it's new position 
     offset.left += $("#myInput").offset().left; 
     offset.top += $("#myInput").offset().top; 
     $(".errorMessage").offset(offset) 
    }); 
});