posizione div tramite javascript

**pietro09** · 23-10-2006, 13:24

mi ci sto perdendo

ho un <input in posizione assoluta.
Vorrei posizionare tramite javascript o (se si può fare) tramite lo stile, un <div appena sotto l'<input

in IE faccio:

var v = $("div3");
v.style.left = $('Text1').offsetLeft;
v.style.top = $('Text1').offsetTop*1 + $('Text1').offsetHeight*1 + 1;

ma con Firefox, come si fa?

ps: $ sta per document.getElementById

**Xinod** · 23-10-2006, 14:10

a me funziona perfettamente

**pietro09** · 23-10-2006, 14:12

Originariamente inviato da Xinod
a me funziona perfettamente

ho aggiunto "px" alla fine e ora va con Opera9 e firefox

ciao

**andr3a** · 23-10-2006, 14:20

io non ho capito il *1 ... qualunque numero intero per 1 da se stesso ed il browser fa rendere per intero ... nel senso che un div a 1.5 lo vedi a 1 (o 2 ?) ... quindi non ho proprio capito quel * 1 a cosa serva :master:

**pietro09** · 23-10-2006, 15:01

Originariamente inviato da andr3a
io non ho capito il *1 ... qualunque numero intero per 1 da se stesso ed il browser fa rendere per intero ... nel senso che un div a 1.5 lo vedi a 1 (o 2 ?) ... quindi non ho proprio capito quel * 1 a cosa serva :master:

in effetti :master: provavo... volevo essere sicuro di sommare numeri e non stringhe

credo che sia più corretto parseInt(offsetTop)

o sbaglio?

**andr3a** · 23-10-2006, 15:04

se presenti, saranno già numeri ... se non presenti, rimarranno NaN (parseInt(null) o parseInt(undefined) non è moltiplicabile) ... quindi non serve ne * 1 ne parseInt ... serve solo l'aggiunta del + "px" in fondo

P.S. anche l'ultimo +1 non l'ho capito

[edit]
http://underscore.wordpress.com/2006...ment-position/

**pietro09** · 23-10-2006, 15:10

Originariamente inviato da andr3a

P.S. anche l'ultimo +1 non l'ho capito

[edit]
http://underscore.wordpress.com/2006...ment-position/

almeno quello è giusto

sposto il div di un px per non attaccarlo al textbox :ignore:

**andr3a** · 23-10-2006, 15:13

appena sotto era 1 px sotto ... tutto ok

**pietro09** · 23-10-2006, 15:16

ho visto adesso il link consigliato: va bene, se i div non sono annidati; nell'esempietto che ho fatto, mi serve la posizione rispetto al primo contenitore

se servisse a qualcuno

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina senza titolo</title>
    <script type="text/javascript" src="../../../js/libreria.js"></script>
<script language="javascript" type="text/javascript">
// <!CDATA[

function Button1_onclick() 
{
    var d = $("div3");
    var t = $('Text1');
    d.style.left = parseInt(t.offsetLeft) + "px";
    d.style.top = parseInt(t.offsetTop) + parseInt(t.offsetHeight) + 1 + "px";
    //d.style.zIndex = 999;
}

// ]]>
</script>
</head>
<body>
    <div id="div1" style="position:absolute; top:50px; left:50px; width:500px; height:500px; border:1px red solid">
        
        <div id="div2" style="position:absolute; top:50px; left:50px; width:400px; height:100px; border:1px blue solid">
            <input id="Text1" type="text" style="position:absolute; top:10px; left:100px; border:1px red solid" />
            <div id="div3" style="position: absolute; z-index:100; width:100px; height:150px; border:1px red solid; background-color:Yellow">x</div>
        </div>
    </div>
    <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
</body>
</html>

ps. quando si usa il + in javascript forse è meglio assicurarsi una volta di più che non siano stringhe, ma numeri:
Melius abundare, quam deficere

**andr3a** · 23-10-2006, 15:48

Originariamente inviato da pietro09

ps. quando si usa il + in javascript forse è meglio assicurarsi una volta di più che non siano stringhe, ma numeri:

il più per concatenare stringhe non si dovrebbe usare se non in rari casi (e solo per comodità) perchè la stringa ha il metodo concat creato appositamente per fare quella operazione (oltretutto molto più veloce, anche di un [array, kilometrico].join("")).

Ci si assicura che i numeri siano numeri quando non si ha a che fare con metodi nativi dove le specifiche del linguaggio dicono che quel parametro è un numero.

In questo caso è come aver fatto

parseInt(2) + parseInt(3) + 1 + "px";

se quell'uno in fondo non lo metti in parseInt non capisco perchè ci metti gli altri valori.

offsetLeft - Integer 32 (o Float ?) ... questo è e lo è per tutti i browsers ... in questo caso mettere prseInt è solo ridondante nonchè più pesante (più caratteri, anche se li comprimi).

per gli altri casi se non si scrive "strict" o non si è certi che siano numeri ti do ragione

[edit]
metodo sufficiente senza problemi
d.style.left = t.offsetLeft + "px";
d.style.top = (t.offsetTop + t.offsetHeight + 1) + "px";

metodo che preferisco solitamente
d.style.left = "".concat(t.offsetLeft, "px");
d.style.top = "".concat(t.offsetTop + t.offsetHeight + 1, "px");

Discussione: posizione div tramite javascript

Strumenti discussione

Ricerca discussione

Visualizza

posizione div tramite javascript

Permessi di invio