div fisso con offset() o position()

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Buongiorno, nel form che uso effettuo una validazione con jquery e gli avvisi mi appaiono utilizzando questa funzione
HTML:
$('body').append('<div id="nameInfo" class="info"></div>');

         var nameInfo = $('#nameInfo');
         var ele = $('#nome');
         var pos = ele.offset();

         nameInfo.css({
            top: pos.top-3,
            left: pos.left+ele.width()+25
         });

solo che usando la funzine offset() se cambio la risoluzione del desktop mi cambia anche la posizione degli avvisi che sono dei semplici div. Come posso fare per rendere questi div fissi rispetto ad un elemento del body?
Ho fatto delle prove ma la posizione non cambia.
 
Ciao, secondo me dovresti affiancare il div all'elemento e non aggiungerlo al body, prova questo esempio
HTML:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $("input[type='text']").focus(function(){
            $(".tooltip").hide();
            $(this).next().show();
        });      
    });

</script>
<style>
    form {
        line-height: 28px;
    }
    form label {
        display: inline-block;
        width: 120px;
        text-align: right;
        margin-right:5px;
    }
    span.tooltip {
        display: none;
        position: absolute;
        width: 180px;
        overflow: hidden;
        text-align: left;;
        color: #4A4F59;
        background-color: #F5F5F5;
        border-radius:4px;
        border:1px solid #E1E1E1;
        padding:6px;
        margin-left:5px;
        font-size:.8em;
        color:#777;
    }
</style>
<form>
    <label>Username : </label>
    <input type="text" name="user"/>
    <span class="tooltip">
        Indicazioni sulla scelta dell'user : <br/>
        Lunghezza minima 8 caratteri . <br/>
        Almeno due caratteri numerici . <br/>
    </span>
    <br/>
    <label>Password : </label>
    <input type="text" name="pass"/>
    <span class="tooltip">
        Indicazioni sulla scelta della password : <br/>
        Lunghezza minima 8 caratteri . <br/>
        Almeno due caratteri numerici . <br/>
        Almeno un carattere speciale . <br/>
    </span>
    <br/>
    <label>Ripeti password : </label>
    <input type="text" name="rpass"/>
    <span></span><!-- nessun tooltip -->
    <br/>
    <label>Telefono : </label>
    <input type="text" name="tel"/>
    <span class="tooltip">
        Solo numeri
    </span>
    <br/>
</form>
 

Discussioni simili