Problemi con javascript e style

Programmazione e Server Database e Linguaggi
#1

Ciao a tutti!
Problema semplice:

  • ho 3 div
  • 2 saranno sempre nascosti e uno solo visibile (a turno)
    ora, vorrei che fossero posizionati esattamente nello stesso punto, ma non ci riesco.
    Per ora vengono visualizzati uno sotto l’altro.
    Ho pensato di usare un
document.getElementById("id").style.marginTop

negativo (tipo -460px con 460px l’altezza del div precedente)
Ricavo l’altezza del div precedente con il comando

h = (-1)*(document.getElementById("project").offsetHeight)

e poi lo assegno come marginTop in questo modo:

document.getElementById("contact").style.marginTop = h

ma in questo modo non va :(:((stampando h mi da il valore giusto (-450px)).

Se invece uso

document.getElementById("contact").style.marginTop = '-450px'

tutto funziona.
Come posso fare per farlo funzionare dinamicamente e non dovere ogni volta cambiare questa altezza manualmente??

Spero di essere stato chiaro!:smiley:

#2

Per questa cosa ti consiglio di dare un occhio al framework http://jquery.com/. Puoi usare le sue funzioni base o al limite un plugin. La cosa risulterà più pulita e anche più semplice!

#3

Grazie MarioS,
conosco jQuery (a grandi linee) ma non volevo integrare una libreria così grande e potente per fare una cosa così semplice, e poi vorrei imparare a scrivermi un po’ di javascript, per sapermi un po’ arrangiare…

Qualcuno ha idea di come risolvere??

#4

Se vuoi che i 3 div siano perfettamente sofrapposti ti consiglio un posizionamento assoluto:

<!-- altre cose -->
<div style="position:relative;">
   <div style="position:absolute; top:100;left:200;"></div>
   <div style="position:absolute; top:100;left:200;"></div>
   <div style="position:absolute; top:100;left:200;"></div>
</div>
<!-- altre cose -->

Ovviamente è caldamente consigliato di mettere questi valori di style in un file css con opportune classi; i valori di top e left li ho messi a caso.

Spiegazione: Il primo div contenitore con posizionamento relativo, serve per permettere il posizionamento assoluto dei suoi contenuti all’interno dei suoi bordi. Se non agisci in questo modo, il posizionamento assoluto fa riferimento ai bordi della finestra.

L’uso di margin (mi sembra) a questo scopo ti rovina la pagina creando altri margini che probabilmente non volevi. Inoltre, eviterei di usare javascript quando non è strettamente necessario.