Discussion :

[kij]

Bonjour,

J'ai actuellement un script javascript sur l'un de mes sites qui me permet de modifier le status "visible" ou "hidden" de DIV sur la page.

En bref voici mes fonctions :

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
function onMouseOverOut ( elem, mode ){
	document.getElementById(elem).style.visibility = mode;
}

function updateStatus ( _div, _name, _value ){
	
	var oDiv = document.getElementById(_div);
	//alert("update status for : [div: "+_div+"] [name: "+_name+"] [value: "+_value+"]");
	if ( myTabSector[_name] == 0 ){
		// --- Change style
		changeFunctions(0, _div);

               alert("coucou");   // popup de test

		oDiv.style.visibility = "visible";

		// --- Update status in sectors array
		myTabSector[_name] = 1;
		// --- Update sectors session array
		opener.addSectorsInSession(_name, _value);
	}
	else if ( myTabSector[_name] == 1 ){
		// --- Change style
		changeFunctions(1, _div);
		oDiv.style.visibility = "hidden";

		// --- Update status in sectors array
		myTabSector[_name] = 0;
		// --- Update sectors session array
		opener.removeSectorsInSession(_name, _value);
	}
	
	
}

function changeFunctions ( status, divName ){
	
	var oDivs = null;
	var max = 0;

	if ( divName == "secteur7" )
		max = 8;
	else if ( divName == "secteur9" )
		max = 5;

	if ( max == 0 )
	{
		oDivs = document.getElementsByName(divName);
		upStat(oDivs[0],status,divName);
	}
	else {
		for ( var i = 1; i <= max; i++)
		{
			oDivs = document.getElementsByName(divName+i);
			upStat(oDivs[0],status,divName);
		}
	}

}

function upStat ( oDiv, status, divName ){

		if ( status == 0 )
		{
			oDiv.onmouseover = function(){};
			oDiv.onmouseout = function(){};
		}
		else if ( status == 1 )
		{
			oDiv.onmouseover = function(){
				onMouseOverOut(divName, "visible");
			}
			oDiv.onmouseout = function(){
				onMouseOverOut(divName, "hidden");
			}
		}
}

function selected ( value, libelle, div ){
	// --- Update status of current zone
	updateStatus(div, libelle, value);
}

Lorsqu'un utilisateur clique sur une "cellule" (DIV), une autre DIV invisible jusque là apparait (pour faire un effet grisé sur la cellule en question. J'ai donc mis la fonction "selected" (voir plus haut le script) sur l'évênement onClick de la cellule.

Mon probleme est le suivant : sous FF aucun soucis tout fonctionne. Sous IE tout semble fonctionner, seulement j'ai un "parasite" quelque part dans le sens ou des que j'ai cliqué la cellule se grise (la DIV invisible devient visible) et de suite redevient normale ( la DIV invisbile devenu visible redevient visible) sans aucune raison apparente.

Pour débugger j'ai mis une pop-up juste avant le changement de style (voir code). Si bien que lorsque je clique sur un cellule, la popup apparait juste avant de modifier l'état de la cellule. Je décale la popup ainsi apparut en dehors de la fenetre ou j'ai mes cellules, puis clique sur "ok" de la popup d'alert. Et là, miracle, la cellule reste grisée. Par contre lorsque je repasse ma souris sur la fenetre (n'importe ou) ou se trouvent les cellules, la cellule précédemment grisée redevient normal. :s

Quelqun saurait il d'ou cela peut venir ?

Merci beaucoup pour votre aide ^^

[d-Rek]

Il serait possible d'avoir une URL pour voir ?
Là c'est compliqué de comprendre, se rendre compte.
Si tu souhaites modifié la couleur de ta div au survol ou au click (voir aussi OnFocus, OnBlur), utilises du CSS !

[kij]

Voici une url de site d'exemple, pour se rendre sur la page adéquat, cliquer sur le menu 'TRANSACTION' sur la gauche, puis dans la page qui apparait, sur la carte géographique : une pop-up s'ouvre afin de sélectionner plusieurs secteurs.

LIEN SUPPRIME

Sous FF ca fonctionne impec, mais pas sous IE.


PS : sinon une url directe sur la page :
LIEN SUPPRIME

[Auteur]

bonjour,

je me demande si cela ne vient pas de la fonction document.getElementsByName utilisée dans le script :
cf. cette discussion :
http://www.developpez.net/forums/sho...d.php?t=284119

Rajouter un message pour voir le nombre de div renvoyés par la fonction getElementsByName (ici test ajouté dans changeFunctions()).

Code javascript :

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

1
2
3
4
5
6
7
8
 
if ( max == 0 )
	{
		oDivs = document.getElementsByName(divName);
                alert(oDics.length);
 
		upStat(oDivs[0],status,divName);
	}

De plus vérifiez que les id des div sont uniques.

[kij]

Merci beaucoup pour cette remarque judicieuse. Après avoir lu le sujet du lien, je pense également que cela vienne du fait que j'utilise getElementsByName sur des DIV.

En attendant donc (puisque bug prioritaire, les sites sont en lignes), je vais mettre les valeurs de l'attribut name en id, afin que cela fonctionne le temps que j'apporte une correction (getElementById au lieu de getElementsByNames)


N'y a-t-il pas un "patch" javascript permettant de prendre en compte les DIV avec getElementsByName par hasard ?

[Auteur]

En attendant donc (puisque bug prioritaire, les sites sont en lignes), je vais mettre les valeurs de l'attribut name en id, afin que cela fonctionne le temps que j'apporte une correction (getElementById au lieu de getElementsByNames)

Attention : les id contrairement aux name sont uniques ! (deux élements ne peuvent avoir le même id).

N'y a-t-il pas un "patch" javascript permettant de prendre en compte les DIV avec getElementsByName par hasard ?

hum pas vraiment...

Le seul moyen est de faire une recherche par tagName puis de vérifier le name pour chaque div :

Code javascript :

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
 
var tabDiv, n, i;
 tabDiv = document.getElementsByTagName("div");//liste tous les div presents dans la page
 n = tabDiv.length;
 
 for (i=0; i<n; i++)
 {
   //on verifie l attribut name des div.
  // Attention le test est sensible à la casse !
   if (tabDiv[i].name==divName)
   {
    //...Action a realiser si test vrai
 
 
   }
 }