Atributo min-height en IE6

Web July 29th, 2009

Hay algunos navegadores antiguos (IE6 por supuesto) que no soportan algunas propiedades interesantes de CSS como el min-height, que dice cual debe ser la altura minima que debe tomar un elemento.

Afortunamente, hay hacks para solventar este problema, el más simple (solo involucra CSS y no hay que hacer ningún cambio en el HTML) de todos es el siguiente:

selector {
  min-height: 500px;
  height: auto !important;
  height: 500px;
}

IE6 no sabe que significa el !important, por lo que la altura no será automática sino de 500px. El resto de navegadores (los buenos como Firefox, Chrome, Opera… y bueno, también IE7) si harán un render correcto.

Pueden encontrar más información al respecto aquí.

Tags: , , ,

No Comments

Corregir el z-index de animaciones Flash

Web July 29th, 2009

Mientras trabajaba en una página web (que tenía un menú desplegable en CSS y algunas animaciones en Flash) encontré que estos objetos SWF siempre se mostraban sobre todos los demás layers de la web, sin importar que valores le pusiera al z-index de los elementos involucrados.

La solución resultó sencilla, solo bastaba agregar el valor transparent al parámetro wmode del objeto SWF, quedándo de la siguiente manera:

<object type="application/x-shockwave-flash" data="swf/animacion.swf" width="760" height="80">
  <param name="movie" value="swf/animacion.swf" />
  <param name="wmode" value="transparent">
</object>

Como yo estaba utilizando swfobject para colocar las animaciones en Flash de manera más práctica, entonces el cambio fue:

<script type="text/javascript">
  var flashvars = {};
  var params = {};
  params.wmode = "transparent";
  var attributes = {};
  swfobject.embedSWF("swf/animacion.swf", "header", "760", "80", "9.0.115", "swf/expressInstall.swf", flashvars, params, attributes);
</script>

Tags: , , , , ,

No Comments

jQuery: Evitar la modificación del contenido de un inputbox

Web September 17th, 2008

Si en un formulario HTML queremos evitar que los usuarios escriban dentro de elementos inputbox <input type=”text” /> podemos hacer uso de la fantástica librería de JavaScript jQuery para lograr este efecto de una manera no obstructiva.

El siguiente código hace toda la magia, y según creo se explica solo bastante bien.

1
2
3

$("input[type=text]").focus(function(){
    $(this).blur();
});

De todas maneras, nunca está demás la aclaración. La primera parte es el selector por el cual jQuery va a seleccionar todos las etiquetas input que tengan el atributo type como text. Luego, a este subconjunto, se les va a anexar una función a su evento OnFocus (cuando adquiran el foco, el cursor). El contenido de esta función ($(this).blur();) le dice a jQuery que le haga perder el foco al elemento padre (this, que viene a ser el input).

Tags: , ,

No Comments