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

Después de unas merecidas vacaciones vuelvo con un artículo que describe un par de técnicas para manejar la transparencia mediante CSS.

El problema:

Crear una capa con fondo transparente cuyo contenido sea opaco.

La solución:

El primer intento puede vese en el lab: http://www.rafachacon.com/lab/opacity/alpha/opacity.html. Se puede comprobar que el Firefox el texto de la capa transparente también es transparente. Sin embargo, en Explorer el texto es opaco. Si observamos el código comprenderemos por qué:

<div id="transparent">
<div id="opaque">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum adipiscing arcu id sem.
Fusce fermentum. Vivamus id nisl. Aliquam elementum, lacus in adipiscing placerat, justo odio congue nibh, vitae lacinia ipsum augue ut sem.
Etiam eu purus quis diam rutrum faucibus. Morbi accumsan luctus nisi. Aenean a nisl non mauris varius posuere
 Fusce augue quam, dapibus pulvinar, consequat et, aliquet in, magna. Curabitur lacus odio, malesuada sed, ullamcorper quis, venenatis eu, neque.
Aenean pharetra luctus tellus. Suspendisse potenti. Nulla viverra mattis nisl. Etiam molestie odio sit amet ante. Quisque vehicula lacinia erat.
Vestibulum consequat diam non sem. Duis est est, sollicitudin a, eleifend ut, pharetra ut, neque. Pellentesque volutpat luctus dolor.
</div>
</div>

Y el estilo de cada capa es el siguiente:

#transparent { width: 300px;
 
border: 1px solid #000;
 
background-color: #000;	opacity: 0.5;
 
filter: alpha(opacity=50);
 
-moz-opacity: 0.5;
 
}
 
#opaque {
 
border: 1px solid red;
 
position: relative;
 
}

Colocar en #opaque la regla position: relative; nos ofrece la posibilidad de que el contenido aparezca opaco… solo en Explorer.

Una solución mejor:

Nuestra preocupación es que el contenido se muestre opaco también en Firefox. Al hilo de un artículo de Jamie en Nodstrum, cuya lectura recomiendo, podemos llegar a la siguiente solución (ver ejemplo en el lab: http://www.rafachacon.com/lab/opacity/png/opacity.html):

Usando un png transparente de 1×1px como fondo de la capa, podemos simular la transparencia manteniendo el contenido opaco. Esto también funciona en Explorer 7. Sin embargo, de todos es sabido que Explorer 6 no soporta transparencias en los png. La solución en este caso viene dada por la siguiente hoja de estilos:

#transparent {
	width: 300px;
	border: 1px solid #000;
 
	background: url(blackTransparent80.png);
	_background-image: none;
	_background-color: #000000;
	_filter:alpha(opacity=80);
}
 
#opaque {
	border: 1px solid red;
	position: relative;
}

Donde se indica que para Explorer 6 (que interpreta como válidas las reglas con guión bajo) no se incluya imagen de fondo pero sí un color y una transparencia.

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