Discussion :

[corcule]

bonjour à tous

je passe souvent sur vos forums, et c'est bien ainsi que j'ai appris. Et oui, autodidacte...
Mais aujourd'hui, je me suis inscris parce que j'ai beau farfouillé, je trouve tout sauf une solution à mon problème. Peut-être qqn aurait une piste à m'indiquer.

Voici le soucis :

Je construis un petit moteur de recherche par mots-clef qui mets en évidence les résultats en modifiant la propriété "visibility" des blocs dans la page.

Voici le HTML des blocs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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>

La page est pleine de blocs similaires. l'important est ici l'ID de l'image.

Ensuite dans un fichier js externe, j'ai le code suivant :

(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 !))

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
 
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";

Tout fonctionne super avec Firefox (pc/mac) ou Safari, mais sur IE, rien. Après moults tests, j'en viens à suspecter la fonction RevisibleAll. Quelqu'un aurait-il un suggestion ?

je précise que je souhaite bien utiliser la propriété CSS "visiblility" et non "display", l'idée étant que les images soient masquées mais que la mise en page reste tel quel.

[E.Bzz]

Bonjour,

Voici le soucis :

Je construis un petit moteur de recherche par mots-clef qui mets en évidence les résultats en modifiant la propriété "visibility" des blocs dans la page.

Oui mais quelle est la question (principale) ?

Au cas où, visibility admet deux valeurs :
visible
ou
hidden

default n'est pas valide.

A+

[corcule]

E.Bzz, la question est finalement tout bête...
Pourquoi ça marche pas dans IE alors que c'est tout bon dans les autre navigateurs.

La fonction SWFrecherche est appelée par un swf qui récupère le nombre de résultats trouvés. Dans IE, le swf affiche en retour "undefined" au lieu d'un nombre.

J'ai déjà essayé de tester avec la valeur "visible" au lieu de "default" mais si je me rappel bien, le masquage ne s'effectuait plus dans aucuns navigateurs, mais le swf récupérait bien le nombre résultat (sauf pour IE).

J'avoue que tout ça me laisse perplexe. Par acquis de conscience, je m'en vais de ce pas retester avec "visible"...

Cela dit, il me semble que le soucis provient plutôt du js que du CSS.

Merci

[jeje13009]

slt,

remplace visibility par display... visible devient alors block et hidden devient none...

c'est mieux ?

PS : je comprends pas l'intéret de ton <span class=mauve><a class=mauve> ?!

[E.Bzz]

remplace visibility par display... visible devient alors block et hidden devient none...

Cela change la structure de la page, copntrairement à "visibilty".

Remarque :
j'ai édité le 1° post pour ajouter une précision apportée par ailleurs (sur display, justement)

A+

[corcule]

Les <span clas="mauve"> sont utilisé par un autre javascript pour un autre masquage.

L'idée du site est que un ensemble de rectangles de couleur. Le visiteur peut masquer/afficher les rectangles, soit en fonction des couleurs, soit en fonction de mots-clef associés à chacun des rectangles.

Sinon, comme je le disais au départ, la propriété CSS "display" élimine le bloc cible de la mise en page, les autres blocs se réagençant en fonction. Tandis que la priopriété "visibility" ne fait que masqué le bloc, mais il reste toujours présent. Donc tout reste en place.

Voici l'adresse du site en pleine construction :
http://www.corcule.net/TEST/FINAL/
Attention, c'est en pleine construction, et je suis dessus (je test "visible" au lieu de "default"). Donc, ça risque de boguer... Mais le principe fonctionne bien avec FireFox ou Safari.

A+

[corcule]

Si vous souhaitez tester la recherche par mots-clef, je vous suggère,
"corcule", "internet", "animation", "dessin"
A+

[corcule]

Petite considération sur le propriété "visibility"

Il semblerait que la valeur "default" est acceptable, mais seulement si la propriété en question est définie par défaut. (of course dirais-je). Hors, mes blocs images n'ont aucune valeur par défaut. J'ai donc ajouté le paramètre style="visibility:visible;" dans la balise image.
Je n'ai pas IE sous la main dans l'immédiat, mais peut-être est-ce la solution...

A suivre...

[corcule]

La valeur "default" de visibility n'est pas supporter par IE > utiliser "inherit"

Je ne sais pas encore si ça me résoud le soucis dans IE mais ça résoud déjà quelques subtil différence entre FireFox et Safari. c'est déjà ça...

[SpaceFrog]

ou plus simplement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

visibility=''

[corcule]

@SpaceFrog

merci de cette précision, j'ignorais.

[Bisûnûrs]

J'appuie les propos de E.Bzz en ce qui concerne les valeurs de la propriété visibility, il n'y a que hidden et visible. Une troisième existe cependant mais elle n'est pas utile : collapse.

http://www.w3schools.com/css/pr_class_visibility.asp

[corcule]

Et finalement...

En ajoutant le paramètre style="visibility:inherit" dans la balise image et dans le javascript, en jouant avec les valeurs "inherit" ou "hidden", tout fonctionne de la même manière pour IE, FireFox ou Safari.

la valeur "default" pour la propriété CSS est reconnue avec Safari, en partie avec FireFox, pas du tout avec IE.

Demander une mauvaise valeur faisait simplement planté l'ensemble du script javascript sous IE.

Merci à tous pour vos aiguillages.