Obtener la posición (coordenadas cartesianas) de un TD

el_javi · #1 (**permalink**) 14/10/2005, 06:40

Buenas tardes a todos.

Me encuentro con un problema.

Estoy generando tablas por DHTML, creando objetos y añadiendo (appendChaild) mas objetos.

Mi idea (y problema) es el siguiente:

Tengo en diferentes zonas de mi Web unos elementos +, los cuales, al pulsarlos, han de sacar una capa (DIV) con una información.

Como tengo una gran cantidad de elementos +, voy a usar una capa que se posicione, respecto a la posición de un TD.

El tema es, que al pulsar en el +, saque la capa, en una zona de la Web, y para poder posicionar la capa, he de sacar las coordenadas de los diferentes TD Informativos (los cuales tienen su ID).

No se si me he explicado bien.. espero que si.

Ante cualquier duda, posteo lo que me haga falta.

Un saludo, y gracias de antemano.

pinchoso · #2 (**permalink**) 14/10/2005, 07:07

Cogiendo las coordenadas del mouse, a lo mejor te serviria no?
Este codigo te permite saber esas coordenadas:

<script language="JavaScript">

</script>

<body onload="init()">

Poniendo eso te saldria en la barra de estado la X e Y del raton.
Si igualas la posición del layer a la X y la Y en el momento en el que haces click a lo mejor funciona...

Suerte!

caricatos · #3 (**permalink**) 14/10/2005, 10:01

Hola:

Me parece que funciona en todos los navegadores modernos offsetTop y offsetLeft (coordenadas x, y)

Saludos

el_javi · #4 (**permalink**) 14/10/2005, 10:07

Hola Pinchoso.

He leido tu respuesta.. pero he de puntualizarte una cosa (para ver si puedes ayudarme).

El tema está en que el elemento + en el que pulso... no tiene que salir mi capa debajo, ni al lado.

Mi capa tiene que salir debajo de unos elementos (TD) en los que pone INFORMACIÓN... entonces, realmente la X e Y del ratón me son totalmente INÚTILES para este desarrollo.

Espero haberme explicado y que me puedas ayudar.

Un saludo.

el_javi · #5 (**permalink**) 14/10/2005, 10:09

Hola Caricatos.

He visto tu respuesta..y siento comentarte, que no me es util para lo que estoy haciendo...

El problema es que mis elementos están generados de forma dinámica (DHTML) con createElement("TD") y appenChild... y al intentar acceder a las propiedades mencionadas (offsetLeft y offsetTop) me las da con valores VACIOS...

Esta opción ya la vi en otro post del foro.. y la probé.

Espero que podais ayudarme

Muchas gracias por vuestra dedicación.

SiR.CARAJ0DIDA · #6 (**permalink**) 14/10/2005, 10:17

el objeto creado tiene que estar insertado en el documento antes de obtener el offsetTop/left...

el_javi · #7 (**permalink**) 14/10/2005, 10:21

Hola de nuevo..

Gracias por puntualizar lo dicho SiR.CARAJ0DIDA, pero mi elemento, está incluido ya en el documento, dado que lo creo por DHTML, y solo actuo sobre él al pulsar en un elemento...

Muchas gracias.. y a ver so conseguimos sacar esto..

SALUDOS

furoya · #8 (**permalink**) 16/10/2005, 09:09

Hola todos :

Una sugerencia para la próxima, el_javi : muestra cómo creas el documento, porque hay muchas formas de hacerlo y puede haber tantas respuestas.

No creo que haya adivinado a la primera, pero prueba ésto. Ubicar la posición de un objeto es bastante complicado porque depende de cada documento, así que usé span.

Código:

<html>
<head>
<title></title>
<script language= "JavaScript">
function capas(idC){
var laCapa = document.getElementById(idC).getElementsByTagName( "span" )[0];
var ver = (laCapa.style.visibility == "visible") ? "hidden" : "visible";
laCapa.innerHTML = "AQUI " + idC;
laCapa.style.visibility = ver;
}

document.write("<table border=1><tbody>"+
"<tr><td id='aA'><span> </span>ALFA </td><td id='bB'><span> </span>BRAVO </td><td id='cC'><span> </span>CHARLY </td></tr>"+
"<tr><td id='dD'><span> </span>DELTA </td><td id='eE'><span> </span>ECO </td><td id='fF'><span> </span>FOXTROT </td></tr>"+
"<tr><td id='gG'><span> </span>GOLF </td><td id='hH'><span> </span>HOTEL </td><td id='iI'><span> </span>INDIO </td></tr>"+
"</tbody></table> <br /><br />");

document.write("<h3 onclick=\'capas(\"aA\")\'>+ ALFA</h1>"+
"<h3 onclick=\'capas(\"bB\")\'>+ BRAVO</h1>"+
"<h3 onclick=\'capas(\"cC\")\'>+ CHARLY</h1>"+
"<h3 onclick=\'capas(\"dD\")\'>+ DELTA</h1>"+
"<h3 onclick=\'capas(\"eE\")\'>+ ECO</h1>"+
"<h3 onclick=\'capas(\"fF\")\'>+ FOXTROT</h1>"+
"<h3 onclick=\'capas(\"gG\")\'>+ GOLF</h1>"+
"<h3 onclick=\'capas(\"hH\")\'>+ HOTEL</h1>"+
"<h3 onclick=\'capas(\"iI\")\'>+ INDIO</h1>"	)
</script>
<style>
td{position:relative; font-size:22pt; }
td span{position:absolute; z-index:100; background:#ff0; font-size:12pt; font-weight:bold; visibility:hidden;}
h3{cursor:hand; }
h3{cursor:pointer; }
</style>
</head>
<body>

</body>
</html>

saludos

fuoya

el_javi · #9 (**permalink**) 16/10/2005, 14:21

Ante todo, gracias por lo contestado.

Tienes razón respecto a postear el código que estoy usando... asi que aquí va un ejemplo sencillo de lo que estoy haciendo.

Ya hace 3 días que me pego con este tema.. y necesitaría ayuda lo antes posible, dado que estoy prado y sin ningún futuro aparente.

Código:

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

<html>
<head>
	<title>Probando a crear cosas con DHTML</title>
	<script language="JavaScript1.2" type="text/javascript">
		function crearCosas()
		{
			var tablaGeneral = document.createElement("table");
			tablaGeneral.cellPadding = 0;
			tablaGeneral.cellSpacing = 0;
			tablaGeneral.width = 200;
			tablaGeneral.height = 25;
			tablaGeneral.border = 0;
			
			// Creamos un TR
			var trGeneral = document.createElement("tr");
			
			// Creamos el TD
			var tdGeneral = document.createElement("td");
			tdGeneral.width = tablaGeneral.width;
			tdGeneral.height = tablaGeneral.height;
			tdGeneral.style.backgroundColor = "Red";
			tdGeneral.style.border = "solid";
			tdGeneral.style.borderWidth = 1;
			tdGeneral.innerHTML = "Este es el TD";
		
		
			// Creamos una capa con texto, la cual se tiene que situar DEBAJO del TD creado
			var capaPaDebajo = document.createElement("div");
			capaPaDebajo.id = "divContent";
			capaPaDebajo.style.visibility = "visible";
			capaPaDebajo.style.position = "absolute";
			capaPaDebajo.style.overflow = "visible";
			capaPaDebajo.style.borderWidth = 0;
			capaPaDebajo.style.borderStyle = "solid";
			capaPaDebajo.style.borderColor = "Blue";
			capaPaDebajo.style.backgroundColor = "#00FF00";
			capaPaDebajo.innerHTML = "Esta capa tendría que quedar DEBAJO del TD.<br><br>No vale con posición RELATIVA porque el TD se estiran sus bordes y no es la finalidad";

			capaPaDebajo.style.width = tablaGeneral.width;
			capaPaDebajo.style.height = tablaGeneral.width;


			// Voy añadiendo la jerarquía de elementos	
			tdGeneral.appendChild(capaPaDebajo);
			trGeneral.appendChild(tdGeneral);
			tablaGeneral.appendChild(trGeneral);
			
			// Finalmente. añado el elemento PRINCIPAL al documento
			document.getElementById("contenedor").appendChild(tablaGeneral);
			document.getElementById("contenedor").innerHTML = document.getElementById("contenedor").innerHTML; // Si no pongo esta línea, no me crea bien el TD
		}
	</script>
</head>

<body style="margin:0px">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
	<tr>
		<td style="width:100%;height:100%" align="center" valign="middle" id="contenedor">
			<script language="JavaScript1.2" type="text/javascript">crearCosas();</script>
		</td>
	</tr>
</table>


</body>
</html>

En el ejemplo que pongo, mi problema es que la capa que os saldrá en VERDE, necesito que quede TOTALMENTE COLOCADA debajo del TD de ROJO.

Espero que podais ayudarme.

Muchas gracias a todos.

Un saludo

furoya · #10 (**permalink**) 17/10/2005, 11:32

Aún no me quedan claras algunas cosas. Cómo si es una sola celda, si la capa debe "cubrir" lo que tenga debajo o empujarlo, si al acomodarse puede desplazar a la celda y así quedar todo centrado verticalmente...

Seguramente lo estás probando en IE, por eso no te funciona. Seguramente también hay alguna manera de acomodarlo. Pero habrá que reescribirlo y para eso tienes que saber exactamente lo que quieres.

Como comentario adicional, tuve que corregirte algunas 'falta de comillas' y agregué el botón que está debajo de la tabla. Ahora funciona ... en Mozilla.

Lo de la posición relativa no afecta los bordes. Como sugerencia final, podrías usar dos filas-celdas, la del contenido de la capa debajo, y hacerla aparecer y desaparecer; va a empujar lo que esté más abajo o reubicar la celda de arriba si lo centras todo verticalmente. Pero insisto en que olvidaste mencionar cómo quieres que se comporte.

Código:

<html>
<head>
	<title>Probando a crear cosas con DHTML</title>
	<script language="JavaScript1.2" type="text/javascript">
		function crearCosas()
		{
			var tablaGeneral = document.createElement("table");
			tablaGeneral.cellPadding = 0;
			tablaGeneral.cellSpacing = 0;
			tablaGeneral.width = "200px";
			tablaGeneral.height = "25px";
			tablaGeneral.border = 0;
			
			// Creamos un TR
			var trGeneral = document.createElement("tr");
			
			// Creamos el TD
			var tdGeneral = document.createElement("td");
			tdGeneral.id = "tdContent";
			tdGeneral.width = tablaGeneral.width;
			tdGeneral.height = tablaGeneral.height;
			tdGeneral.style.backgroundColor = "Red";
			tdGeneral.style.border = "solid";
			tdGeneral.style.borderWidth = "1px";
			tdGeneral.innerHTML = "Este es el TD";
		
		
			// Creamos una capa con texto, la cual se tiene que situar DEBAJO del TD creado
			var capaPaDebajo = document.createElement("div");
			capaPaDebajo.id = "divContent";
			capaPaDebajo.style.visibility = "visible";
			capaPaDebajo.style.position = "absolute";
			capaPaDebajo.style.overflow = "visible";
			capaPaDebajo.style.borderWidth = 0;
			capaPaDebajo.style.borderStyle = "solid";
			capaPaDebajo.style.borderColor = "Blue";
			capaPaDebajo.style.backgroundColor = "#00FF00";
			capaPaDebajo.innerHTML = "Esta capa tendría que quedar DEBAJO del TD.<br><br>No vale con posición RELATIVA porque el TD se estiran sus bordes y no es la finalidad";

			capaPaDebajo.style.width = tablaGeneral.width;
			capaPaDebajo.style.height = tablaGeneral.width;


			// Voy añadiendo la jerarquía de elementos	
			tdGeneral.appendChild(capaPaDebajo);
			trGeneral.appendChild(tdGeneral);
			tablaGeneral.appendChild(trGeneral);
			
			// Finalmente. añado el elemento PRINCIPAL al documento
			document.getElementById("contenedor").appendChild(tablaGeneral);
			document.getElementById("contenedor").innerHTML = document.getElementById("contenedor").innerHTML; // Si no pongo esta línea, no me crea bien el TD
		}

function muestra(T){
var laCapa = document.getElementById("divContent");


if(laCapa.style.display == "block"){
laCapa.style.display = "none";
T.value = "+";
}

else{
laCapa.style.display = "block";
T.value = "-";
}

}
	</script>
<style>
#divContent{display:none; }
</style>
</head>

<body style="margin:0px">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="1">
	<tr>
		<td style="width:100%;height:100%; " align="center" valign="middle" id="contenedor">
			<script language="JavaScript1.2" type="text/javascript">crearCosas();</script>
		</td>
	</tr>
</table>
<input type="button" value="+" onclick="muestra(this)" />
<br /><br />
</body>
</html>

espero que algo te sirva.

Saludos

furoya

el_javi · #11 (**permalink**) 17/10/2005, 13:07

Ante todo, darte las gracias por tu preocupación furoya.

Si, es cierto que no he dado muchas especificaciones.

Mi idea es que la capa salga debajo del TD, pero sin alterar el contenido que hay debajo (osea, que no me sieve colapsar o contraer un TD y que me desplace contenido).

Al acomodarse, no pude desplazar a la celda de arriba, todo ha de estar maquetado al pixel, y la capa no ha de mover los contenidos de la web.

En mozilla, mas o menos me lo situaba bien (un pelin pa un lado pero weno jejejje) pero el mayor problema está en colocarlo en IE.

Espero que puedas ayudarme más, y sobre todo, gracias por tu dedicación.

Saludos