[Javascript] distanza di elemento X dal bordo del contenitore

**s0r4** · 24-10-2005, 13:09

salve

non so se si può fare ma spero di si

ho alcuni elementi contenuti in un div, mi servirebbe un modo per determinare in automatico la distanza di un certo elemento dal bordo del div

scopo: allineare con precisione alcuni elementi posti subito sotto

suggerimenti?

**Xinod** · 24-10-2005, 15:29

probabilmente si puo' risolvere + facilmente, ma x adesso ecco un esempio:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title></title>
<style type="text/css">
<!--
html, body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
#contenitore {
	width:700px;
	margin:auto;
	border:1px solid #f00;
	color:#f00;
	text-align:center;
}
#contenuto {
	width:500px;
	border:1px solid #0f0;
	color:#0f0;
	margin:auto;
}
#contenuto_annidato {
	width:300px;
	border:1px solid #00f;
	color:#00f;
	margin:auto;
}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function pageCoords(element){
	var coords={x:0,y:0};
	while(element){
		coords.x+=element.offsetLeft; 
		coords.y+=element.offsetTop; 
		element=element.offsetParent; 		
	}
	return coords;
}
function relCoords(slave,master){
	var slv=pageCoords(document.getElementById(slave));
	var mst=pageCoords(document.getElementById(master));
	var x=slv.x-mst.x;
	var y=slv.y-mst.y;
	alert('coordinate relative di "'+slave+'" rispetto a "'+master+'":\nx:'+x+' y:'+y);
}
//-->
</script>
</head>
<body>
<div id="contenitore">contenitore
<div id="contenuto"><p onclick="relCoords('contenuto','contenitore')">contenuto</p>
<div id="contenuto_annidato"><p onclick="relCoords('contenuto_annidato','contenitore')">contenuto_annidato</p>
</div>
</div>
</body>
</html>

ciao

**s0r4** · 24-10-2005, 15:43

bellissimo!!!

posso chiedere un altro favore?
ho ancora troppe lacune per farlo da solo... potresti semplificare il tutto in modo da rilevare soltanto la distanza orizzontale?

**Xinod** · 24-10-2005, 15:54

codice:

<script language="JavaScript" type="text/javascript">
<!--
function pageCoords(element){
	var x=0;
	while(element){
		x+=element.offsetLeft;
		element=element.offsetParent; 		
	}
	return x;
}
function relCoords(slave,master){
	var slv=pageCoords(document.getElementById(slave));
	var mst=pageCoords(document.getElementById(master));
	var x=slv-mst;
	alert('x di "'+slave+'" rispetto a "'+master+'": '+x);
}
//-->
</script>

ciao

Discussione: [Javascript] distanza di elemento X dal bordo del contenitore

Strumenti discussione

Ricerca discussione

Visualizza

[Javascript] distanza di elemento X dal bordo del contenitore

Permessi di invio