samedi 25 novembre 2006

Filter javascript : éviter le bug des popups et des listes déroulantes sous IE 5.X et 6

De nombreux tutoriels existent sur le web traitant de ce problème.
Petit rappel : lorsque vous créez une popup CSS "draggable" (avec la librairie Scriptaculous par exemple) et que vous la déplacez au-dessus d'une liste déroulante de IE, cette dernière passe au-dessus de la popup.

Pour y remédier, j'ai utilisé un petit script en Javascript qui permet de masquer la liste déroulante et de la remplacer par un champ texte avec une image de fond rappelant la liste déroulante et contenant l'information affichée par la liste déroulante.

De cette façon, l'utilisateur a toujours l'information qu'il a choisie en vue et la popup CSS passe bien au-dessus.

Bien sûr si l'internaute essaie d'actionner la liste déroulante, il s'apercevra bien vite du trucage.
Le point important est de faire le changement de composants lors de l'apparition de la popup et de remettre la liste déroulante quand la popup disparaît.
Il s'agit donc d'un "petit truc" qui permet juste d'éviter cet effet inesthétique.

Chaque élément "liste déroulante" doit être suivi par un champ texte.
La fonction Javascript masquera la/les liste(s) déroulante(s) de la page, affichera chaque champ texte qui suit et recopiera l'info affichée par la liste dans le champ texte lors de l'apparition de la popup.
Elle fera l'inverse lors de sa disparition.

Voici la fonction Javascript :




/**
* Bascule les combobox sous ie pour r?soudre le bug
* des boites dragables qui passent sous la combobox.
**/
function switchCB(id) {

if((navigator.appName).search("Microsoft") != -1){
var formElements = document.getElementById('myForm').elements;
if(id != null){

memId = id;
var tabId = id.split(":");
var blockId = tabId[1].split("_");
var id = blockId[1];

for(var dde=0; dde<formElements.length;dde++){

if((formElements[dde].type == "select-one")
&& (formElements[dde].name != "myForm:blockTable_"+id+":fields")){

formElements[dde].style.display = 'none';
if(formElements[dde].nextSibling){
if(formElements[dde].nextSibling.style){
formElements[dde].nextSibling.style.display = 'block';
var selected = formElements[dde].selectedIndex;
formElements[dde].nextSibling.value =
formElements[dde].options[selected].text;
}
}
}
}

}else{

for(var dde=0; dde<formElements.length;dde++){

if((formElements[dde].type == "select-one")
&& (formElements[dde].name != "myForm:blockTable_"+id+":fields")){

formElements[dde].style.display = 'block';
if(formElements[dde].nextSibling){
if(formElements[dde].nextSibling.style){
formElements[dde].nextSibling.style.display = 'none';
}
}
}
}
memId = null;
}
}
}




N'étant pas un expert Javascript, si vous pouvez améliorer cette petite fonction faites le nous partager ...

0 commentaires: