Recuperar la posición absoluta de un div.

[danilat]

No estoy seguro de que esto sea posible, a ver si alguien me puede decir algo.

Necesito conocer la posición(coordenadas) de un div, para guardar un cambio de posición del div.

¿es posible recuperar esta información si el cambio de posición se hace con innerHTML? ¿o me lo tengo que montar de otra manera?

Saludos.

[nicolaspar]

Con un innerHTML no podes cambiar la posición de un div, en todo caso su tamaño, pero siempre arrancara al mismo top/left que tenia antes. De todas maneras, si estas usando otra cosa, la podes obtener con un ejemplo así:

Código:

function test(){
    obj = document.getElementById("test");
    alert("el top es: " + obj.offsetTop + "\nEl left es: "+ obj.offsetLeft )
}
<a href="javascript:test()">XY</a>
<br />
<br />
<div id="test">Content</div>

[locojars]

Yo tambien necesito algo como eso, probe con las propiedades que ha puesto nicolaspar y no me funciona porque los 2 div que tengo me dan la misma coordenada.

YO tengo los div en una tabla de esta manera:

Código:

<table>
<tr><td>Nombre de la empresa</td><td><div id="nombre">.....</div></td></tr>
<tr><td>Direccion</td><td><div id="direccion">.....</td></tr>
</table>

Al querer obtener la posicion de los 2 elementos me da el mismo valor y no se como hacer, para que me de el valor real.

Gracias por su atencion y ayuda.
Saludos,
.

[nicolaspar]

Poné el código js que estas usando para obtener estas propiedades y el envento con el que lo llamas...en si, armanos una pagina solo con esto y lo vemos ;)

[locojars]

Hola nicolas, Gracias por tu ayuda. he separado el codigo js en otro archivo y lo adjunto:

Código:

function findPosX(obj)
{
	var curleft = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curleft += obj.offsetLeft
			obj = obj.offsetParent;
		}
	}
	else if (obj.x)
		curleft += obj.x;
	return curleft;

}

function findPosY(obj)
{
	var curtop = 0;
	if (obj.offsetParent)
	{
		while (obj.offsetParent)
		{
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	}
	else if (obj.y)
		curtop += obj.y;
	return curtop;
}



function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.visibility='hidden';
}
function ShowContent(d,id) {
	if(d.length < 1) { return; }
	else
		{
		document.getElementById(d).style.visibility='visible';
		document.getElementById(d).style.position='absolute';
               // aqui deberia de tomar la posicion del div que se oculta
		var elemento = document.getElementById(id);
		var pos = findPosX(elemento);
		var posy = findPosY(elemento);
		var posiciony = posy;
		var posicion = pos;
		document.getElementById(d).style.left = posicion;
		document.getElementById(d).style.top = posiciony;
		alert(elemento.offsetTop);

		}
}

// id=El div que ocultara, d=El div que mostrara
function validar_lista(id,d,foco,listado)
{
    var selObj = document.getElementById(listado);    
    var selIndex = selObj.selectedIndex;
    if(selObj.options[selIndex].value =="Another")
	{
  	  HideContent(id);
	  ShowContent(d,id);
	  objeto = document.getElementById(foco); 
	  objeto.focus();
	  return;
	} 
}

Aqui esta el HTML:

Código:

<table width="750" align="center" border="1" style="border-left:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000">	
	<tr>
		<td width="300"><b>Clasificacion del cliente(Cuentas)</b></td>
		<td>&nbsp;
			<div id="clas" style="posiction:absolute;visibility:visible">
			<select id="clasificacion" name="clasi" size="1" onChange="validar_lista('clas','lista_clasi','another_clasi','clasificacion')">
           </select>
           </div>
   			<div id="lista_clasi" style="position:absolute;visibility:hidden">
   			<form name="f1" method="GET">
   			<input type="hidden" name="tipo" value="cclasificacion_eng">
			<input type="text" id="another_clasi" name="another_clasi" size="25">
			<input type="button" value="Add" onClick="procesar_form(this.form,'clasificacion','lista_clasi','clasifica')" name="boton">
			</form>
			</div>        	
		</td>
	</tr>
	<tr>
		<td width="300"><b>Tipo de industria(Cuentas)</b></td>
		<td>&nbsp;
		    <div id="TipoIndustria" style="posiction:absolute;visibility:visible">
			<select id="tindustria" name="tindustria" size="1" onChange="validar_lista('TipoIndustria','lista_tindustria','another_tindustria','tindustria')">
           </select>
           </div>
   			<div id="lista_tindustria" style="position:absolute;visibility:hidden">
   			<form name="f2" method="GET">
   			<input type="hidden" name="tipo" value="tindustria_eng">
			<input type="text" id="another_tindustria" name="another_tindustria" size="25">
			<input type="button" value="Add" onClick="procesar_form1(this.form,'tindustria','lista_tindustria')">
			</form>
			</div>        	
		</td>
	</tr>
</table>

Las funciones findPosX finPosY me da un valor distinto que el utilizar elemento.offsetTop.

El valor me da el mismo para ambas divs.

Gracias por tu ayuda y atencion.

[locojars]

HIce una prueba con lo que respuestas que pussiste y en este casi si da las coordenadas exactas.. el problema es debido a las tablas.. si puedes ayudarme te lo agradeceria.

Saludos,
Jars.

[Ansgar]

Yo tengo un proble parecido!! quiero obtener la cordenada de un 2 div en base a ventana o el body q los contiene... es que estoy hacinedo un album de fotos .

la cosa es q si yo quiero borrar la imagen ! esta pueda ser rrastrada a un cuadro q dice "suelta la foto aqui para borrarla "...

el problema es q necesito los cordenadas para poder hacer una comparacion (no exacta pero aproximada en con cada div) para asi activar el if q borra la imagen por medio de AJAx...

les estaria muy agradecido.. si me dan la mano!


pd. necesito las funciones o algo asi! .