Printable View
salve a tutti...
avrei bisogno del vostro aiuto per completare un piccolo script.
ho un link che onclick cambia la proprietà display di un div da none a block. vorrei posizionare il div in questione usando:
dove offTop, offLeft rappresentano la posizione del link.Codice://document.getElementById("box").style.top=offTop;
//document.getElementById("box").style.left=offLeft;
Il problema è che non so come fare a trovare tali coordinate.
Qualcuno sa aiutarmi.
Grazie in anticipo
E dove vorresti posizionarlo? Puoi spiegare il problema in maggior dettagli, magari indicando anche l'indirizzo della pagina in questione?
intanto grazie
la pagina è qui.
e riporto anche il codice html che uso:
per il momento ho inserito solo la funzione che cambia lo stato di display... perchè non sapendo come calcolare la posizione del link è inutile variare la posizione del box.Codice:<head>
<title>Esperimenti</title>
<script type="text/javascript">
function show() {
document.getElementById("box").style.display="block";
}
</script>
</head>
<body>
<div style="width:500px; margin:0 auto; padding-top:100px;">
<a href="#" onclick="show();">Clicca Qui</a>
</div>
<div id="box" style="display:none; width:200px; height:80px; background:#CCC;">
Contenuto nascosto.
</div>
</body>
quel che vorrei ottenere è che cliccando sul link indipendentemente da dove il link si trova nella pagina il div gli appaia sempre sotto..
a questo scopo pensavo esistesse un modo per calcolare la posizione del link sullo schermo, e quindi variare di volta in volta le coordinate in cui il div viene mostrato...
spero di essere stato più chiaro
Ma ti serve che appaia sopra il resto del contenuto oppure vuoi che rimanga nel flusso normale?
sopra
avrei dovuto metterci anche il position:absolute nello style del div id='box'
Se vuoi ottenere le coordinate di un elemento, segui questa spiegazione: http://www.quirksmode.org/js/findpos.html.
Un modo più semplice è spostare il div#box nel precedente div, impostare sul primo la proprietà CSS top al valore 100% e sul secondo la proprietà position su relative.
ok... grazie
un'ultima cosa riguardo la funzione findPos(obj) che c'è al link che mi hai suggerito...
cosa devo passare come parametro?
L'oggetto DOM rappresentante l'elemento, per esempio document.getElementById("box").
ti ringrazio per le risposte che continui a darmi,
ma non riesco a farlo funzionare...
ho letteralmente copiato ed incollato il codice di quel tuo link, ma non va
secondo te dov'è il problemaCodice HTML:<head>
<title>Esperimenti</title>
<script type="text/javascript">
function show() {
[offLeft,offTop] = findPos(document.getElementById("box"));
document.getElementById("box").style.top=offTop;
document.getElementById("box").style.left=offLeft;
document.getElementById("box").style.display="block";
}
function findPos(obj) {
var curleft = 0;
var curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}
</script>
</head>
<body>
<div style="width:500px; margin:0 auto; padding-top:100px;">
<a href="#" onclick="show();">Clicca Qui</a>
</div>
<div id="box" style="display:none; width:200px; height:80px; background:#CCC; position:absolute;">
Contenuto nascosto.
</div>
</body>
Stai cercando di ottenere la posizione del div#box, il quale non ne ha poiché hai impostato la proprietà CSS display su none.
Poi non puoi assegnare un valore ad un array, devi assegnarlo ad una variabile e poi ripescarlo. Quello che hai scritto tu non è EcmaScript, ma è Javascript 1.7 e non universalmente supportato.
Infine quando assegni il valore alle proprietà top e left devi indicare anche l'unità di misura (pixel).
grazie.
ora non ho tempo di provare, ma credo che funzionerà con le tue correzioni
ancora grazie
ciao,
solo ora, seguendo le tue indicazioni ho modificato il codice:
ma continua a non funzionare...Codice HTML:<!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" style='height:100%'>
<head>
<title>Esperimenti</title>
<script type="text/javascript">
function show() {
a = findPos(document.getElementById("txt"));
a[0] = a[0] + "px";
a[1] = a[1] + "px";
document.getElementById("box").style.top=a[1];
document.getElementById("box").style.left=a[0];
document.getElementById("box").style.display="block";
}
function findPos(obj) {
var curleft = 0;
var curtop = 0;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
a[0] = curleft;
a[1] = curtop;
return a;
}
}
</script>
</head>
<body>
<div id="txt" style="width:500px; margin:0 auto; padding-top:100px;">
<a href="#" onclick="show();">Clicca Qui</a>
</div>
<div id="box" style="display:none; width:200px; height:80px; background:#CCC; position:absolute;">
Contenuto nascosto.
</div>
</body>
</html>
ci deve essere qualche errore nella funzione findPos perchè basta che inserisco quella (anche non richiamandola da nessuna parte), non funziona più nemmeno il cambio della proprietà display del div "box" da none e block
a te viene in mente altro?
Hai modificato la funzione, era corretta come avevi scritto prima.
Scritto così, l'interprete quando si trova ad eseguire l'istruzione di assegnazione
genera un errore, poiché a non è definita.Codice:a[0] = curleft;
ok...
pensavo anche quello andasse sistemato...
ora funziona
ti ringrazio per la pazienza