Fernando, te respondo interlineado.
On 12/16/06, Fernando Tubio <[EMAIL PROTECTED]> wrote:
Parece que tenía todas las piezas del rompecabezas, pero no supe armarlo.
Gracias Luis.
Jaja, de nada, a todos nos pasa! Producto de estar mucho tiempo absorto en
lo mismo y perdés el foco hasta que uno de afuera con la cabeza fresca te
dice "pero, y si...?" y de repente Eureka! ;)
Me quedé un poco intrigado por la siguiente frase ..."También elaborándolo
un poco más, podrías usar getComputedStyle en todos los casos (incluído
IE)."... Te importaría explayarte un poco más con respecto a este punto. IE6
no soporta getComputedStyle, no estoy seguro sobre IE7 pero una prueba
rápida parece sugerir que tampoco.
No, es verdad que no lo soporta, pero me refería (ojo, no lo probé) a que en
caso de querer dejarlo más elegante y reusable, si evaluás que no existe el
método (caso IE) podrías prototiparlo con una implementación tuya de manera
de siempre llamar a getComputedStyle. También podrías hacer al revés y
prototipar las propiedades clientLeft y clientTop de HTMLElement , pero yo
te decía la primer alternativa porque getComputedStyle es parte del W3C DOM
mientras que clientLeft y clientTop no.
Mirate este ejemplo:
http://dithered.chadlindstrom.ca/javascript/dom2_views/index.html
A propósito, tenés idea si existe alguna forma de obtener el estilo de un
pseudo-elemento, por ejemplo 'first-letter', en el caso de IE. El problema
se presenta cuando intento copiar el estilo del elemento destino cuando este
contiene pseudo-elementos. En el caso de getComputedStyle('elemento',
'pseudo-elemento'), el segundo parámetro permite acceder a ellos, pero en
el caso de IE no parece existir forma de hacer referencia a estos a través
de currentStyle.
Hum, no. No me resulta extraño que en IE no haya manera de hacerlo, dado el
pobre soporte de pseudo elementos que tiene. Y si ves el ejemplo que te di
arriba, vas a ver que los tipos tampoco se lo implementan... lo voy a
masticar un poco, a ver si se me ocurre al menos algún workaround pero me
parece que estás en el horno... :\
Saludos!
Luis
----- Original Message -----
*From:* Luis Farzati <[EMAIL PROTECTED]>
*To:* [email protected]
*Sent:* Saturday, December 16, 2006 10:25 AM
*Subject:* [puntonet] OFF-TOPIC - Recuperar la posicion de un elemento
HTML
Hola Fernando,
Ahora entiendo lo que querés hacer. :) Es medio complicadito!
En IE tenés la propiedad clientLeft y clientTop, que te devuelve
precisamente el ancho del borde izquierdo y superior respectivamente, aunque
esto no es W3C compliant y en otros browsers como el Firefox no está
disponible.
Ahora, intrigado me puse a investigar alguna solución y encontré una
opción que habría que ver si te sirve:
Podrías recuperar el ancho del borde de otra forma que es utilizando el
método DOM getComputedStyle. Esto, como el nombre lo dice, te devuelve los
valores computados del estilo de un elemento (en vez de traerte los valores
literales que obtenés con la propiedad style).
Con lo cual podrías ir por la primer opción, si evaluás que el browser
tiene el soporte ala IE, y en caso contrario utilizar getComputedStyle.
Un ejemplo rápido:
if(dst.currentStyle && dst.currentStyle.hasLayout ) {
src.style.top = dst.offsetTop + dst.offsetParent.offsetTop +
dst.clientTop + 'px';
src.style.left = dst.offsetLeft + dst.offsetParent.offsetLeft +
dst.clientLeft + 'px';
}
else {
var realTop = parseInt( document.defaultView.getComputedStyle(dst,
"").getPropertyValue('border-top-width').replace('px', ''));
var realLeft = parseInt(document.defaultView.getComputedStyle(dst,
"").getPropertyValue('border-left-width').replace('px', ''));
src.style.top = dst.offsetTop+dst.offsetParent.offsetTop+realTop +
'px';
src.style.left =
dst.offsetLeft+dst.offsetParent.offsetLeft+realLeft + 'px';
}
También elaborándolo un poco más, podrías usar getComputedStyle en todos
los casos (incluído IE).
Más info en:
http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/ViewCSS.html
http://www.faqts.com/knowledge_base/view.phtml/aid/7157
http://annevankesteren.nl/2006/05/offset#comment-5377
http://www.setmajer.com/demo/find_position_test/js/main.js
De todas formas, por lo que veo querés hacer algo bien genérico, no? Si el
div que se posiciona encima tiene que adaptarse al tamaño y demás estilos
visuales (como ser el borde) del elemento a pisar, no es mala idea lo que
estás haciendo de 'camuflarlo' con el estilo destino.
Saludos,
Luis
On 12/15/06, Fernando Tubio <[EMAIL PROTECTED]> wrote:
>
> (Primero disculpas al resto de la lista porque cuando envié el mensaje
> originalmente omití indicar que se trataba de un off-topic. )
>
> Hola Luis,
>
> Gracias por contestar. Ya lo creo que es todo un tema, particularmente
> cuando se trata de hacer algo que funcione de igual forma en los browser más
> populares. En este caso especificar un float no me permitiría superponer un
> objeto sobre otro, y z-index me ayudaría solo en el caso de que los
> elementos ya se encuentren correctamente posicionados y superpuestos.
>
> Intentaré dar un ejemplo simplificado de lo que intento lograr.
>
> <html>
> <head>
> <style>
> #src {
> background-color:yellow;
> }
>
> #elt1 {
> background-color:#ffeeff;
> padding:40px;
> }
>
> #elt2 {
> border:solid 30px;
> padding:40px;
> }
> </style>
> <script>
> function moverAqui(dst) {
> var src = document.getElementById('src');
>
> // parche para IE para forzar hasLayout
> dst.style.zoom = '1';
>
> // esto es simplificado, ya que si el elemento se encontrara
> anidado dentro de
> // otros elementos posicionados habría que recorrer la
> jerarquia sumando los offsets
> src.style.position = 'absolute';
> src.style.top = dst.offsetTop + dst.offsetParent.offsetTop +
> 'px';
> src.style.left = dst.offsetLeft +
> dst.offsetParent.offsetLeft + 'px';
> src.style.height = dst.clientHeight + 'px';
> src.style.width = dst.clientWidth + 'px';
> }
> </script>
> </head>
> <body>
> <h1 id="elt1" onclick="moverAqui(this);">Esto es un elemento
> cualquiera. Haga clic aqui!</h1>
> <h1 id="elt2" onclick="moverAqui(this);">Esto es otro elemento
> cualquiera. Haga clic aqui!</h1>
> <div id="src">ESTE ES EL ELEMENTO A POSICIONAR</div>
> </body>
> </html>
>
> Haciendo clic en cualquiera de los dos elementos, 'elt1' y
> 'elt2', posiciona el <div> sobre el elemento en cuestión. Como el elemento
> 'elt1' carece de borde, el div cubre el area de contenido correctamente. Sin
> embargo, el estilo del elemento 'elt2' indica un borde, y el div aparece en
> la posición incorrecta. Mi problema es encontrar la forma de encontrar las
> coordenadas del 'area interior' del elemento, por adentro del borde. No
> encuentro un mecanismo que me devuelva el ancho del borde en pixels y que
> funcione en forma 'cross-browser'.
>
> Por ahora encontré una alternativa que es copiar el estilo del elemento
> sobre el cual se va a posicionar, de tal forma que el div tenga el mismo
> borde. De esta forma el efecto visual es correcto. Pero estoy teniendo otros
> problemas con esta solución así que todavía no estoy seguro si es viable.
>
> Saludos,
>
> Fernando Tubio
>
> ----- Original Message -----
> *From:* Luis Farzati <[EMAIL PROTECTED]>
> *To:* [email protected]
> *Sent:* Friday, December 15, 2006 6:46 PM
> *Subject:* [puntonet] Recuperar la posicion de un elemento HTML
>
> Hola Fernando,
>
> La obtención de las posiciones es todo un tema, tienen ciertas reglas
> que tienen que ver con la forma de renderear el elemento que tiene el
> browser.
>
> Si te posteás un pequeño ejemplo del problema concreto, como para que
> sea más visible, vemos cómo lo podemos encarar. Pero mi sugerencia es que,
> si lo que querés es superponer un objeto, pruebes combinando el float y
> z-index (o z-order?) del CSS. En mi experiencia siempre es conveniente
> esquivar posicionado absoluto, en lo posible.
>
> Saludos,
>
> Luis
>
>
> On 12/12/06, Fernando Tubio <[EMAIL PROTECTED]> wrote:
> >
> > Necesito posicionar un <div> en forma absoluta de tal forma que se
> > superponga al area de contenido de un elemento en una página HTML,
> > pero
> > estoy encontrando dificultades en hallar un mecanismo que me devuelva
> > las
> > dimensiones necesarias. Puedo calcular las coordenadas del ángulo
> > superior
> > izquierdo del elemento sumando los valores de offsetLeft y offsetTop
> > de la
> > jerarquía de elementos contenedores, pero el resultado corresponde a
> > las
> > coordenadas del borde externo del elemento. Necesito las coordenadas
> > del
> > área de contenido, excluyendo bordes y padding.
> >
> > Internet Explorer posee las propiedades clientLeft y clientTop que
> > podrían
> > ser útiles, pero por desgracia no son estándar y no han sido
> > implementadas
> > en Mozilla por ejemplo, a pesar de que este último si dispone de
> > clientWidth
> > y clientHeight. Para determinar las dimensiones del borde + padding
> > supongo
> > que podría usar algo similar a (offsetWidth - clientWidth) / 2, pero
> > esto
> > asume que el borde y el padding son iguales en cada lado del elemento,
> > y
> > esto no siempre es el caso. Los valores disponibles a partir de la
> > propiedad
> > style no pueden ser usados para realizar el cálculo ya que sus
> > unidades no
> > son siempre uniformes. Se podría tener por ejemplo un valor para el
> > ancho
> > del borde expresado como 'thick' o '1em'. Necesito un valor expresado
> > en
> > pixels.
> >
> > ¿Alguna sugerencia?
> >
> > Saludos,
> >
> > Fernando Tubio
> >
> >
> >
>
