Foros del Web » Programación web » Javascript »

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

Estas en el tema de Obtener la posición (coordenadas cartesianas) de un TD en el foro de Javascript en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 14/10/2005, 06:40
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Obtener la posición (coordenadas cartesianas) de un TD

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.
  #2 (permalink)  
Antiguo 14/10/2005, 07:07
Avatar de pinchoso  
Fecha de Ingreso: octubre-2005
Ubicación: Barcelona
Mensajes: 177
Antigüedad: 8 años, 11 meses
Puntos: 0
Cogiendo las coordenadas del mouse, a lo mejor te serviria no?
Este codigo te permite saber esas coordenadas:

<script language="JavaScript">
<!--
function mouseMove(e) {
var x = (document.layers)? e.pageX : event.x+document.body.scrollLeft
var y = (document.layers)? e.pageY : event.y+document.body.scrollTop
status = "x:"+x+" y:"+y
return true
}
function init() {
document.onmousemove = mouseMove;
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
}
// -->
</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!
__________________

  #3 (permalink)  
Antiguo 14/10/2005, 10:01
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.109
Antigüedad: 12 años, 5 meses
Puntos: 1133
Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #4 (permalink)  
Antiguo 14/10/2005, 10:07
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Puntualizo Pinchoso

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.
  #5 (permalink)  
Antiguo 14/10/2005, 10:09
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Te reseño algo Caricatos

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.

  #6 (permalink)  
Antiguo 14/10/2005, 10:17
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 10 años, 2 meses
Puntos: 4
el objeto creado tiene que estar insertado en el documento antes de obtener el offsetTop/left...
__________________
Internet Explorer SuckS
Download FireFox
  #7 (permalink)  
Antiguo 14/10/2005, 10:21
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Gracias por la puntualización SiR.CARAJ0DIDA

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
  #8 (permalink)  
Antiguo 16/10/2005, 09:09
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 10 meses
Puntos: 317
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
  #9 (permalink)  
Antiguo 16/10/2005, 14:21
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Hola Furoya

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
  #10 (permalink)  
Antiguo 17/10/2005, 11:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 11 años, 10 meses
Puntos: 317
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
  #11 (permalink)  
Antiguo 17/10/2005, 13:07
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: Toledo
Mensajes: 782
Antigüedad: 9 años, 5 meses
Puntos: 6
Algunos datos...

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:01.
SEO by vBSEO 3.3.2