jQuery - creazione di un elemento floating stick su un altro elemento

Question

Uso il plugin di convalida del modulo jQuery this. Mostra errori di campo in un piccolo div floating che è grande.

Il problema sorge quando viene visualizzato l'errore div e quindi l'elemento a cui corrisponde si sposta dalla sua posizione originale. Ad esempio se sopra una casella di input I .show() un elemento che era precedentemente nascosto, spingerà l'input verso il basso, ma il prompt di errore per quell'input rimarrà al suo posto.

Come posso rendere il div flottante/seguire il suo elemento corrispondente?

Il codice per questo plug-in è here e gli esempi sono here.

Answer 1

Il plug-in utilizza il posizionamento assoluto per i messaggi di errore.

Se si aggiungono altri elementi DOM che spostano la posizione dei campi di input rispetto al documento, sarà necessario riposizionare manualmente tutta la convalida <div> dopo che lo script che modifica il DOM viene eseguito.

Si potrebbe provare a utilizzare compensato la jQuery() Metodo http://api.jquery.com/offset/ per ottenere la nuova posizione dell'elemento di ingresso relativo al documento, e quindi modificare la convalida < s' div > proprietà superiore e sinistro di conseguenza.

Ecco un .jsFiddle che vi mostra cosa intendo: 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" /> 

javascript

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