Tips para solucionar un molesto problema de Internet Explorer con un poco de javascript.
¿has invertido horas en construir delicados DIVs que flotan sobre tu página web, tal vez un menu desplegable o un panel de resultados Ajax, sólo para descubrir que en Microsoft Internet Explorer los elementos <select> aparecen siempre sobre los <div> flotantes?
Yo también.
El problema es común y sucede porque, en IE, los elementos <select> son “rendereados” (dibujados en pantalla) directamente por Windows y no por el navegador. Una de las consecuencias no previstas de la <sarcasmo>brillante</sarcasmo> idea de hacer IE tan integrado al sistema operativo.
La solución, o más bien parche, para este inconveniente es esconder los <select> antes de desplegar otros elementos sobre ellos, y volver a mostrarlos al esconder los elementos flotantes.
Esto se hace con javascript, y una forma común es algo así:
function escondeSelects(){
if(!window.attachEvent) return false;
var selects = document.getElementsByTagName(”select“);
for( var i=0; i<selects .length; i++ ){
selects[i].style.display = “none“;
}
}
La primera línea de la función (if(!window.attachEvent) return false;) revisa que exista el método attachEvent del objeto window. Este método sólo existe para la versión no estándar del DOM de IE, por lo tanto si el método no existe no es necesario esconder los <select> y la función detiene su ejecución.
La función escondeSelects() obtiene todos los elementos <selec> en un array usando el método del DOM estándar document.getElementsByTagName(), que retorna todos los elementos HTML que correspondan a la etiqueta pasada como argumento. Luego hace un loop sobre esa colección usando for y actualiza la propiedad style.display de cada elemento al valor “none”, haciendolo invisible.
Ahora basta con llamar a escondeSelects() antes de mostrar elementos flotantes sobre la página.
La función para volver a encender los elementos es similar pero retorna la propiedad style.display al valor “inline”, default para los <select>.
Ahora, si estas usando la librería Javascript Prototype.js podrías usar la espectacular función $$(), que recibe un selector CSS, y hacer algo como esto:
$$(“select”).each( function(select){select.hide()} );
Y para volver a mostrar:
$$(“select”).each( function(select){select.show()} );
Espero que se note la elegancia de esta última solución con respecto a la primera. Prototype.js nos ayuda a reducir nuestro código miestras esperamos las bondades del nuevo Javascript.
Technorati Tags: javascript, prototype, web development, DOM
Autor: Ismael Celis
www.estadobeta.com
Usuarios que han visto este tema también han visto...
- Cambio de Imagen en JavaScript
- Mensaje en la barra de estado al pasar el ratón por encima con JavaScript
- Clicks en 20 segundos en Javascript
- Fecha y hora en JavaScript
- DOMTool: Crea código DOM a partir de HTML
- Versión imprimible de este documento
- Enviar por e-mail este documento
