Pregunta
¿Cómo ocultar un select con una capa en IE6?
Responder esta pregunta por dudin el 2008-12-16
De seguro les ha sucedido esto a varios programadores. Tengo un menú superior con un submenú desplegable (los cuales son listas no ordenas UL anidadas) que cuando se despliega sobre un formulario que contiene campos de tipo "select", debe cubrir u ocultar a todos los elementos que queden por debajo del área del submenú; pero esto no sucede con el "select" pues "atraviesa" el submenú. ¿Cómo hago para que el UL cubra al select?
Respuestas
Este problema se presenta en Internet Explorer para las versiones 5.5 o 6, sin embargo, puede resolverse implementado un script que realice las siguientes tareas:
1- Chequear el tipo y versión del navegador usado.
2- Crear dinámicamente un elemento iframe con el mismo tamaño de la capa.
3- Añadir atributos al iframe para que sea oculto a la vista además de transparente.
4- Ponerlo justo debajo de la capa (Esto requiere que la capa tenga al menos un z-index de 2).
Para implementar el script se ha utilizado la librería Javascript Prototype en algunas partes, por lo que podría adaptarse a otras librerías ya existentes y simplificar aún más el código:
Referencias:
- WCH - Windowed Controls Hiderhttp://aplus.rs/wch/intro/- Zapatec Utilshttp://www.zapatec.com/website/ajax/zpsuite/jsdocs/overview-summary-utils.js.html
1- Chequear el tipo y versión del navegador usado.
2- Crear dinámicamente un elemento iframe con el mismo tamaño de la capa.
3- Añadir atributos al iframe para que sea oculto a la vista además de transparente.
4- Ponerlo justo debajo de la capa (Esto requiere que la capa tenga al menos un z-index de 2).
Para implementar el script se ha utilizado la librería Javascript Prototype en algunas partes, por lo que podría adaptarse a otras librerías ya existentes y simplificar aún más el código:
Utils.createWCH = function(element) {
var f = null;
element = element || window.self.document.body;
if (Prototype.Browser.IE) {
var filter = 'filter:progid:DXImageTransform.Microsoft.alpha(style=0,opacity=0);';
var id = "WCH" + Math.ceil(Math.random() * 1000) ;
element.insertAdjacentHTML
('beforeEnd', '<iframe id="' + id + '" scroll="no" frameborder="0" ' +
'style="z-index:0;position:absolute;border:0;top:0;left:0;width:0;height:0; visibility:hidden;' + filter +
' background-color: white;" ' +
'src="javascript:false;"></iframe>');
f = window.self.document.getElementById(id);
}
return f;
};
Utils.setupWCH = function(f, el) {
if (f) {
var offs = Element.cumulativeOffset(el);
var dim = Element.getDimensions(el);
f.style.width = dim.width + "px";
f.style.height = dim.height + "px";
f.visibility = "inherit";
}
};
Utils.hideWCH = function(f) {
if (f)
f.style.visibility = "hidden";
};
Utils.destroy = function(el) {
if (el && el.parentNode)
el.parentNode.removeChild(el);
};
Utils.showWCH = function(f) {
if (f)
f.style.visibility = "";
};
Ahora para aplicarlo al menú (me refiero a cada uno de los submenúes anidados) una vez cargada la página completamente:HTML.__wch = new Array();
Event.observe(window, 'load', init, false);
function init() {
if (Prototype.Browser.IE) {
var k =0;
$$("#menu li").each( function(li){
if(li.lastChild.tagName=="UL" || li.lastChild.tagName=="ul"){
li.setAttribute("num", k);
HTML.__wch[k] = Utils.createWCH(li.lastChild);
li.onmouseover=function() {
var ul= this.lastChild;
var ki = this.getAttribute("num");
HTML.__wch[ki].style.zIndex = -1;
ul.style.display="block";
Utils.setupWCH(HTML.__wch[ki],ul);
Utils.showWCH(HTML.__wch[ki]);
}
li.onmouseout=function() {
var ki = this.getAttribute("num");
this.lastChild.style.display="none";
Utils.hideWCH(HTML.__wch[ki]);
}
k++;
}
});
}
}
Referencias:
- WCH - Windowed Controls Hiderhttp://aplus.rs/wch/intro/- Zapatec Utilshttp://www.zapatec.com/website/ajax/zpsuite/jsdocs/overview-summary-utils.js.html
por maikel el 2008-12-17
Faaa! suena a que es mucho código para un bug del IE6 -que ya me tiene harto-.
No podría ser otra solución mas sencilla, setear mediante js la propiedad "visibility:hidden", o "display:none" a el/los select?
Yo ahora mismo lo voy a probar.
Saludos!
Esteban López Adriano
Funes - Santa Fe - Argentina
No podría ser otra solución mas sencilla, setear mediante js la propiedad "visibility:hidden", o "display:none" a el/los select?
Yo ahora mismo lo voy a probar.
Saludos!
Esteban López Adriano
Funes - Santa Fe - Argentina
por Anónimo el 2009-03-31



