ottenere posizione di un link

11-06-2011, 11.27.55

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:

Codice:

//document.getElementById("box").style.top=offTop;
//document.getElementById("box").style.left=offLeft;

dove offTop, offLeft rappresentano la posizione del link.
Il problema è che non so come fare a trovare tali coordinate.

Qualcuno sa aiutarmi.
Grazie in anticipo

**karl94** · 11-06-2011, 12.49.04

E dove vorresti posizionarlo? Puoi spiegare il problema in maggior dettagli, magari indicando anche l'indirizzo della pagina in questione?

11-06-2011, 14.32.22

intanto grazie

la pagina è qui.

e riporto anche il codice html che uso:

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>

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.

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

**karl94** · 11-06-2011, 15.01.14

Ma ti serve che appaia sopra il resto del contenuto oppure vuoi che rimanga nel flusso normale?

11-06-2011, 16.19.46

sopra

avrei dovuto metterci anche il position:absolute nello style del div id='box'

**karl94** · 11-06-2011, 18.06.06

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.

11-06-2011, 18.22.50

ok... grazie

un'ultima cosa riguardo la funzione findPos(obj) che c'è al link che mi hai suggerito...
cosa devo passare come parametro?

**karl94** · 11-06-2011, 18.35.14

L'oggetto DOM rappresentante l'elemento, per esempio document.getElementById("box").

11-06-2011, 19.44.25

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

Codice 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>

secondo te dov'è il problema

**karl94** · 11-06-2011, 19.56.51

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).

11-06-2011, 20.24.35

grazie.
ora non ho tempo di provare, ma credo che funzionerà con le tue correzioni

ancora grazie

14-06-2011, 22.30.50

ciao,

solo ora, seguendo le tue indicazioni ho modificato il codice:

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>

ma continua a non funzionare...
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?

**karl94** · 14-06-2011, 22.37.23

Hai modificato la funzione, era corretta come avevi scritto prima.
Scritto così, l'interprete quando si trova ad eseguire l'istruzione di assegnazione

Codice:

a[0] = curleft;

genera un errore, poiché a non è definita.

14-06-2011, 22.46.27

ok...

pensavo anche quello andasse sistemato...
ora funziona

ti ringrazio per la pazienza

Discussione: ottenere posizione di un link

LinkBack

Strumenti discussione

Display

ottenere posizione di un link

Regole di scrittura