11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous

je ne viens pas souvent (tant mieux pour moi...), mais aujourd'hui, je dois dire que je sèche, j'espère que quelqu'un pourra m'indiquez quelques pistes...
Le problème englobe plusieurs techniques, mais après moults tests, j'ai fini pas isoler le problème, uniquement sous Internet Explorer, venant d'une petite boucle javascript. Alors...

Algo : L'objectif est de résaliser une petite recherche d'un mot dans un tableau javascript, et, en fonction du résultat, masquer ou afficher les images dans la page HTML en changeant la propriété "visibility".

Je m'explique :

1 - Déclencheur - j'ai un menu swf (intégré avec (l'excellent) SWFObject)
2 - Cibles - dans la page html, j'ai une série de ligne :

<span class="mauve"><a href="selecteur.php?a=1" class="mauve"><img id="id26" name="img35" src="images/0001.gif" width="140" height="54" border="0"></a></span>
<span class="rouge"><a href="selecteur.php?a=2" class="rouge"><img id="id35" name="img36" src="images/0002.gif" width="140" height="54" border="0"></a></span>

etc...


Tout simple, l'important est l'id des images "id1", "id2", etc...

3 - Module - le menu swf appelle avec ExternalInterface la fonction javascript (c'est un petit module de recherche):

// pour info, TabMots est un array contenant les mots-clefs, TabID est un tableau
// associatif contenant les id correspondant aux mots-clefs.
// (j'ai utiliser 2 tableaux distincts parce que je ne suis pas arrivé à faire de 
// recherche seulement sur les "key" d'un tableau associatif. (ce n'est pas le 
//problème mais si quelqu'un en passant à une piste pour ça aussi, je suis preneur !)

var TabID = new Array();
var TabMots = new Array();

TabID['voiture'] = "id1,id4,id22";
TabMots.push("voiture");

TabID['fleur'] = "id1";
TabMots.push("fleur");

TabID['maquette'] = "id1";
TabMots.push("maquette");

//etc...
// 

function SWFrecherche(args) {
	var SResult = 0;
	var st ='';
	var TabR = new Array();
	var Nid = '';

	ReVisibleAll(); // Tout est remis visible au cas ou
	
		for(var x=0; x<=(TabMots.length-1) ; x++){
			lookR = TabMots[x];
			if (lookR.indexOf(args) != -1){ // on recherche un bout de texte par mis les mots-clefs
				if (st!=''){
				    st += ","+TabMC[lookR]; // si il y a un résultat, on récupère les id correspondant au mots-clefs dans l'autre tableau
				}else{
				    st = TabMC[lookR];
				}
			}
		}
		if (st!=''){
		   TabR = st.split(",");
		}
		if (TabR.length>=1){ 
		    for(var a=1 ; a<='.$NombreId.' ; a++){
			  Nid='id'+a;
			  if(verifTab(TabR,Nid)){ // masquage
			     document.getElementById(Nid).style.visibility ="hidden";
			  }else{
			     document.getElementById(Nid).style.visibility ="default";
			  }
		    }
		}
		var SResult = TabR.length;
		return SResult;
};

function verifTab(ar,val){
    for(var u=0 ; u<=ar.length ; u++){
	  if(ar[u]==val){
		return false;
	 }
    }
return true;
};

function ReVisibleAll(){
     // toutes les images sont rendues visibles avant la recherche
	for(var r=1 ; r<=70 ; r++){
	    idC='id'+r;
	    document.getElementById(idC).style.visibility="default";
	}
};



OK, bon, j'ai bien conscience que la construction du js est pas super élégant... je ne suis qu'un amateur autodidacte débutant avec un bac L Smiley cligne

En tout cas ça fonctionne super dans FireFox ou Safari (sur mac), mais sur Internet Explorer, rien.
Je suspecte la boucle de la fonction RevisibleAll, sans trop savoir pourquoi...

Je précise (pour avoir farfouiller sur google) que le soucis ne vient pas de ExternalInterface, qui fonctionne par ailleurs nickel avec un autre swf sur la même page.
Je précise aussi que je ne souhaite pas utiliser la propriété CSS "display" au lieu de "visibility", l'idée étant que les images soient masquées mais que la mise en page reste tel quel.
Je précise que le javascript est intégré en externe.

Quelqu'un verrait-il d'où peut venir le soucis ? Une piste? un lien salvateur ?
Merci à tous
Une dernière précision.
je ne pense pas que ça est de l'importance mais j'en sais rien...
Le javascript est généré par du PHP à partir d'un fichier XML au chargement de la page. Est-ce que ça peut avoir une incidence sur la mise en mémoire des variables ? J'en doute. Et vous ?
Hello,

Pour rendre les éléments visibles, j'aurai plutot mis
document.getElementById(idC).style.visibility="visible";


Peut-être que ça aide ?
Oui, "visible" au lieu de "defaut".
J'ai déjà essayé mais curieusement, ça ne fonctionne plus pour Firefox. Bon sang, rien que d"écrire ça, j'ai un doute...
Je vais à tout hasard réessayer avec "visible".

Cela dit, il me semble que le soucis provient du javascript en lui-même plutôt que des propriétés CSS.

J'ai vaguement lu quelque part qu'une modification des propriétés CSS de plusieurs blocks par une boucle javascript (ici la fonction RevisibleAll) ne fonctionnait pas dans IE. Je trouve ça un peu étrange. Est-ce que qqn pourrait infirmé ou confirmé ce point ?

Merci
a écrit :
J'ai vaguement lu quelque part qu'une modification des propriétés CSS de plusieurs blocks par une boucle javascript (ici la fonction RevisibleAll) ne fonctionnait pas dans IE.


Cela ne me dit rien du tout, il n'y a à ma connaissance aucun problème à ce niveau là.