Mostrar un layer en la posición de un objeto html

salvador86 · #1 (**permalink**) 18/12/2008, 17:07

Hola tengo un pequeño problema el siguiente js me da como resultado la posición del top y left del botón que esta en la página, pero cuando utilizo esos resultado para posicionar una capa (div) que esta oculta solo es correcto en Explorer y Opera pero no en Nestcape y Firefox, les pongo el código completo de mi ejemplo para que me puedan ayudar.

Lo que pretendo es ocultar el boton con el layer, muchas gracias

Sale un alert para que vean que la posición si sale bien pero no se porque en mi js el Firefox y Nestcape no le hace caso cuando lo uso para posicionar el layer.

Cita:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">

</style>
<script language="JavaScript" type="text/javascript">
function posicion(element) {
if (typeof element == "string")
element = document.getElementById(element)

if (!element) return { top:0,left:0 };

var y = 0;
var x = 0;
while (element.offsetParent) {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
}
return {top:y,left:x};
}
function verposicion() {
var elemento = document.getElementById('miboton');
var pos = posicion(elemento)
document.getElementById('win').style.visibility="v isible";
document.getElementById('win').style.top=pos.top;//aqui es donde le digo su posición
document.getElementById('win').style.left=pos.left ;
alert("top="+pos.top+" left="+pos.left);
}
</script>

</head>
<body>
<div id="win" style="position:absolute; width:100px; visibility:hidden;">
<table width="100" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF9900">
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="contenedor">
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFCC00">1</td>
</tr>
<tr>
<td bgcolor="#0099CC">2</td>
</tr>
<tr>
<td bgcolor="#FF6600">3</td>
</tr>
<tr>
<td bgcolor="#FF0099">4</td>
</tr>
<tr>
<td><div align="center">
<input type="submit" name="Submit" value="Enviar" onclick="verposicion()" id='miboton'/>
</div></td>
</tr>
</table>
</div>
</body>
</html>

Panino5001 · #2 (**permalink**) 18/12/2008, 19:33

Seguramente sí te devuelve la posición, sólo que no estás agregando la unidad (=pos.top+'px';) a la definición de la nueva posición.

salvador86 · #3 (**permalink**) 20/12/2008, 09:31

Gracias Panino, no vi pequeño error.