Programatik

Hemos estado trabajando en un proyecto inmobiliario. Cada ficha de inmueble presenta varias pestañas donde el usuario puede seleccionar datos del inmueble, fotografías, una visita virtual y un mapa de localización.

Este mapa no es más que el código que Google Maps proporciona para copiar y pegar en forma de IFrame. Sin embargo, nos encontramos con un problema sobre el que no teníamos noticias: si tratas de cargar un mapa de Google Maps en una capa oculta, dicho mapa no se renderiza correctamente y aparece gris. Además, los botones de la interfaz salen descuadrados.

Al principio pensamos que se trataba de algo común a la carga de contenido en un IFrame, sin embargo descubrimos que es el propio renderizado de Google Maps el que no soporta que allí donde pegues el código del mapa esté oculto.

La solución a esto ha sido la siguiente:

• Se indica que la capa tenga un display de bloque (con lo cual está visible).
• Se posiciona la capa de forma absoluta (position: absolute;)
• Se sitúa la capa fuera del viewport (top: -10000px;).

Después de esto, el mapa se ha cargado correctamente. Como quiera que la capa del mapa se muestra al hacer clic en una de las pestañas de la ficha del inmueble, ésta vuelve a su posición correcta, ya visible (y con el mapa, como hemos dicho, cargado por completo).

Hemos observado este comportamiento en FF, IE7, IE6 y Safari.

Enlaces

Un cliente nos ha pedido un sistema que permita incluir un globo de información que se muestre al pasar sobre un enlace concreto.

Para lograr este efecto hemos escrito este sencillo código que hemos bautizado como TipSystem, ya que puede resultar útil para haer un sistema de tips o consejos basados en globos de información emergentes.

Se puede ver una demostración de su funcionamiento en el Lab:

http://www.rafachacon.com/lab/TipSystem/

En el código fuente podemos ver cómo los enlaces que necesitamos que reaccionen al pasar el ratón por encima tienen un atributo id de la forma tslink-NombreDelTip. También tenemos una sere de capas ocultas con id de la forma tip-NombreDelTip.

En el evento onload en Body se llama a la función javascript TipSystem() que inicia el proceso de captura de tips y aplicación de acciones a los eventos onmouseover de los enlaces marcados como sensibles para los tips.

Enlaces

He estado buscando la forma de detectar mediante javascript las pulsaciones de teclas de forma que sea compatible con otros navegadores además de Internet Explorer.

La clave está en que para detectar la pulsación de teclas debemos tener presentes que dicha detección se hace siempre desde un evento keypress, keyup o keydown.

Una demostración puede verse en esta dirección del lab:

Demostración de la detección de la tecla pulsada

Para que sea compatible con otros navegadores (no solo Internet Explorer), tomamos el elemento del DOM sobre el que vamos a detectar la pulsación de teclas y le asociamos una función anónima al evento de pulsación (keypress, keydown o keyup) a la que se pasa el evento como argumento.

Y, como siempre, el código para descargar, aquí.

Enlaces