Javascript et ie

**pierreconeille** · 16/10/2009, 19h04

Bonjour a tous.

Avec IE je n'arrive pas à modifier le nom de class alors que sur firefox, opera ça marche nickel.
Ma question, est-ce moi qui fait une faute ou c'est IE qui n'accepte pas?
Que dois-je changer?

=> Dans je fichier .js Le probleme se produit quand je change className='aff' en className='contenu', le ClassName ne change pas et donc le div reste affiché

code .html

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
 <head><title>Sandwitch</title>
<link type="text/css" rel="stylesheet" href="style-p2p.css">
<script language="javascript" src="js-p2p.js"></script>
</head>
<!--[if  IE ]>
<style type="text/css">
 .onglet{
     display: inline;
     border: #6b8e23 2px solid;
     margin: 0px;
     padding : 10px;
     background-color: #a52a2a;
}
</style> 
<![endif]-->
 
 
<body onload="navigateur();" >
<div align="center" >
<img src="logo_pomme-de-pain.jpg" title="LOGO" alt="pas d'image"           /><br/>
<div class="onglet" name="onglet" ><a  href="javascript:;" onclick="sandwich('gr');">Grilladin</a>
</div>
<div class="onglet"name="onglet"><a  href="javascript:;"onclick="sandwich('ca');" >Capresse</a>
</div>
<div class="onglet"name="onglet"><a  href="javascript:;" onclick="sandwich('sa');">Saveur du Sud</a>
</div>
<div class="onglet"name="onglet"><a  href="javascript:;" onclick="sandwich('mo');">Montagnard</a>
</div>
<div class="onglet"name="onglet"><a  href="javascript:;" onclick="sandwich('pa');">Pays</a>
</div>
<div class="onglet"name="onglet"><a  href="javascript:;" onclick="sandwich('cr');">Craquant</a>
</div>
</div>
<br/>
 
<div class="contenu" name="contenu"  id="gr"  ><ul>
    <li>bearnesse</li>
    <li>conté</li>
    <li>steak</li>
    <li>Plat secondaire</li>
    <li>icberg</li>
</ul></div>
<div class="contenu " name="contenu" id="ca"> <ul>
    <li>tapenade</li>
    <li>mozzarella</li>
    <li>tomate confie</li>
    <li>grain de pin</li>
 
</ul>
</div>
<div class="contenu " name="contenu" id="sa">
<ul>
    <li>piono?</li>
    <li> ail</li>
    <li> poulet epicer</li>
    <li> icberg</li>
</ul></div>
<div class="contenu" name="contenu" id="mo" ><ul>
    <li>creme fraiche, ciboulette</li>
    <li>tomate</li>
    <li> bacon</li>
    <li> fondue</li>
    </ul></div>
<div class="contenu " name="contenu" id="pa"><ul>
    <li>beure</li>
    <li>janbon cru</li>
    <li> cornichon</li>
    </ul>
 
</div>
<div class="contenu"  name="contenu"id="cr"><ul>
        <li>(vache ki rie, macedoine,)</li>
		<li> jambon</li>
		<li>cornichon</li>
		<li>salade</li>
</div>
 
 
 
</body>

code .css

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
.onglet {
 
     border: #6b8e23 2px solid;
     margin: 0px;
     padding : 10px;
     background-color: #a52a2a;
}
 
.contenu {
      display: none;
 
 
}
.aff {
      display :block ;
        border: #6b8e23 2px solid;
 
 
      font-size: 2em;
	  background-color: #8A2BE2; 
}
 
body {
      background-image: url(enseigne-pomme-de-pain.jpg);
 
}
 
li{
 
     margin-left : 500px;
 
}

code .js

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
function sandwich(spef){
 
a=document.getElementsByName('contenu');
  for ( var z=0; z<a.length; z++){
 
     a[z].className='contenu';
  }
 
  document.getElementById(spef).className = 'aff';
 
 
}
 
function navigateur(){
 if(navigator.appName== "Netscape") { 
 
 x=document.getElementsByName('onglet');
   for (var i=0; i<x.length;i++){
 
	x[i].style.display= 'inline-block';}
 }
  else if  (navigator.appName=="Microsoft Internet Explorer"){
 
  y=document.getElementsByName('onglet');
    for (var j=0;j<y.length; j++){
    alert('ie');
	y[j].style.display= 'none';
  }
 
  }else alert('autre');
 
 
 
}

Merci

**Bovino** · 16/10/2009, 19h52

Salut,

Je pense pense que tu devrais déclarer tes variables avec le mot clé var, car IE a effectivement des problèmes sinon, voir la FAQ.

**SpaceFrog** · 16/10/2009, 19h53

Béarnaise pas nesse !

pour le bug IE ça vient sans doute de l'utilisation du onclick de la balise a sans faire de return false ?

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Sandwitch</title>
<link type="text/css" rel="stylesheet" href="style-p2p.css">
<script language="javascript" src="js-p2p.js"></script>
<style type="text/css">
.onglet {
 
     border: #6b8e23 2px solid;
     margin: 0px;
     padding : 10px;
     background-color: #a52a2a;
}
 
.contenu {
      display: none;
 
 
}
.aff {
      display :block ;
        border: #6b8e23 2px solid;
 
 
      font-size: 2em;
	  background-color: #8A2BE2; 
}
 
body {
      background-image: url(enseigne-pomme-de-pain.jpg);
 
}
 
li{
 
     margin-left : 500px;
 
}</style> 
<script>
function sandwich(spef){
 
a=document.getElementsByName('contenu');
  for ( var z=0; z<a.length; z++){
 
     a[z].className='contenu';
  }
 
  document.getElementById(spef).className = 'aff';
 
 
}
 
function navigateur(){
 if(navigator.appName== "Netscape") { 
 
 x=document.getElementsByName('onglet');
   for (var i=0; i<x.length;i++){
 
	x[i].style.display= 'inline-block';}
 }
  else if  (navigator.appName=="Microsoft Internet Explorer"){
 
  y=document.getElementsByName('onglet');
    for (var j=0;j<y.length; j++){
    alert('ie');
	y[j].style.display= 'none';
  }
 
  }else alert('autre');
 
 
 
}
</script>
 
 
 
<title>Sandwitch</title>
</head>
 
<body onload="navigateur();" >
<div align="center" >
<img src="logo_pomme-de-pain.jpg" title="LOGO" alt="pas d'image"           /><br/>
<div class="onglet" name="onglet" ><a  href="#" onclick="sandwich('gr');return false;">Grilladin</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('ca');return false;" >Capresse</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('sa');return false;">Saveur du Sud</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('mo');return false;">Montagnard</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('pa');return false;">Pays</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('cr');return false;">Craquant</a>
</div>
</div>
<br/>
 
<div class="contenu" name="contenu"  id="gr"  ><ul>
    <li>bearnaise</li>
    <li>conté</li>
    <li>steak</li>
    <li>Plat secondaire</li>
    <li>icberg</li>
</ul></div>
<div align="center" >
<img src="logo_pomme-de-pain.jpg" title="LOGO" alt="pas d'image"           /><br/>
<div class="onglet" name="onglet" ><a  href="#" onclick="sandwich('gr');">Grilladin</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('ca');return false;" >Capresse</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('sa');return false;">Saveur du Sud</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('mo');return false;">Montagnard</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('pa');return false;">Pays</a>
</div>
<div class="onglet"name="onglet"><a  href="#" onclick="sandwich('cr');return false;">Craquant</a>
</div>
</div>
<br/>
 
<div class="contenu" name="contenu"  id="gr"  ><ul>
    <li>bearnesse</li>
    <li>conté</li>
    <li>steak</li>
    <li>Plat secondaire</li>
    <li>icberg</li>
</ul></div>
<div class="contenu " name="contenu" id="ca"> <ul>
    <li>tapenade</li>
    <li>mozzarella</li>
    <li>tomate confie</li>
    <li>grain de pin</li>
 
</ul>
</div>
<div class="contenu " name="contenu" id="sa">
<ul>
    <li>piono?</li>
    <li> ail</li>
    <li> poulet epicer</li>
    <li> icberg</li>
</ul></div>
<div class="contenu" name="contenu" id="mo" ><ul>
    <li>creme fraiche, ciboulette</li>
    <li>tomate</li>
    <li> bacon</li>
    <li> fondue</li>
    </ul></div>
<div class="contenu " name="contenu" id="pa"><ul>
    <li>beure</li>
    <li>janbon cru</li>
    <li> cornichon</li>
    </ul>
 
</div>
<div class="contenu"  name="contenu"id="cr"><ul>
        <li>(vache ki rie, macedoine,)</li>
		<li> jambon</li>
		<li>cornichon</li>
		<li>salade</li>
</div>
 
 
 
</body>
 
</html>

**pierreconeille** · 16/10/2009, 20h41

bonjour,

non cela ne marche toujours pas. Mais j'ai quand meme effectuer vos modification
je précise bien que le className reste sur 'aff' ,
il doit y avoir un problème au niveau de la boucle "for ".

je precise aussi que se code si marche, mais n'est pas classe

Code :

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

1
2
3
4
5
6
7
8
9
10
function sandwich(spef){
  document.getElementById('gr').className = 'contenu';
  document.getElementById('ca').className = 'contenu';
  document.getElementById('sa').className = 'contenu';
  document.getElementById('mo').className = 'contenu';
  document.getElementById('pa').className = 'contenu';
  document.getElementById('cr').className = 'contenu';
  document.getElementById(spef).className = 'aff';
 
}

help me

**Bovino** · 16/10/2009, 21h39

Bon, en regardant ton code d'un peu plus près, il y a une remarque générale, c'est que tu devrais faire attention à la syntaxe et en particulier aux espaces entre les attributs d'une balise.

Ensuite, tu attribues des attributs name à des balises qui ne les acceptent pas selon le W3C, ce n'est pas grave en soi, mais ça peut expliquer ton problème. IE a une facheuse tendance à assimiler les attributs name et id, du coup, si tu as une balise avec un attribut name identique à l'id que tu cherches, ça pose problème...

**kernelfailure** · 16/10/2009, 22h19

Avec .setAttribute('class', ...), pour voir ?

**pierreconeille** · 16/10/2009, 22h46

pour setAttribute, j'ai modifier mais cela ne change rien.

une remarque pour cette fonction sur le site http://www.nanoum.net/blog/9_setAttribute.html

L'attribut class

Sous firefox par exemple, la modification de l'attribut class se fera de la manière suivante :mon_element.setAttribute("class","maclasse");
Internet explorer par contre n'interprètera pas ce code, il lui faudra utiliser className à la place de class.

Pour obtenir un code compatible sous les différents navigateurs, il faudra alors indiquer :
mon_element.setAttribute("class","maclasse");
mon_element.setAttribute("className","maclasse");

Il n'est pas nécessaire d'ajouter une détection du navigateur, le code non compris par chacun ne générant pas d'erreur.

BOVINO: je suis pret a modifier mes name et id, mais comment dire quel div afficher et supprimer tou es autre

simplifions les question, je soihaite afficher un div quand je clik sur le lien, et cacher tou les autres div.. comment ??

merci de votre aide

je vous redonne mais fichier modifier pour plus de clarté

html

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
<head><title>Sandwitch</title>
<link type="text/css" rel="stylesheet" href="style-p2p.css">
<script language="javascript" src="js-p2p.js"></script>
</head>
<!--[if  IE ]>
<style type="text/css">
 .onglet{
     display: inline;
     border: #6b8e23 2px solid;
     margin: 0px;
     padding : 10px;
     background-color: #a52a2a;
}
</style> 
<![endif]-->
 
 
<body  >
<div align="center" >
<img src="logo_pomme-de-pain.jpg" title="LOGO" alt="pas d'image"    /><br/>
<div class="onglet" name="onglet" ><a  href="#" onclick="sandwich('gr');return false;">Grilladin</a>
</div>
<div class="onglet" name="onglet"><a  href="#" onclick="sandwich('ca');return false;" >Capresse</a>
</div>
<div class="onglet" name="onglet"><a  href="#" onclick="sandwich('sa');return false;">Saveur du Sud</a>
</div>
<div class="onglet" name="onglet"><a  href="#" onclick="sandwich('mo');return false;">Montagnard</a>
</div>
<div class="onglet" name="onglet"><a href="#" onclick="sandwich('pa');return false;" >Pays</a>
</div>
<div class="onglet" name="onglet"><a  href="#" onclick="sandwich('cr');return false;">Craquant</a>
</div>
</div>
<br/>
 
<div class="contenu" name="contenu"  id="gr"  ><ul>
    <li>bearnesse</li>
    <li>conté</li>
    <li>steak</li>
    <li>Plat secondaire</li>
    <li>icberg</li>
</ul></div>
<div class="contenu " name="contenu" id="ca"> <ul>
    <li>tapenade</li>
    <li>mozzarella</li>
    <li>tomate confie</li>
    <li>grain de pin</li>
 
</ul>
</div>
<div class="contenu " name="contenu" id="sa" >
<ul>
    <li>piono?</li>
    <li> ail</li>
    <li> poulet epicer</li>
    <li> icberg</li>
</ul></div>
<div class="contenu" name="contenu" id="mo" ><ul>
    <li>creme fraiche, ciboulette</li>
    <li>tomate</li>
    <li> bacon</li>
    <li> fondue</li>
    </ul></div>
<div class="contenu " name="contenu" id="pa" ><ul>
    <li>beure</li>
    <li>janbon cru</li>
    <li> cornichon</li>
    </ul>
 
</div>
<div class="contenu"  name="contenu" id="cr" ><ul>
        <li>(vache ki rie, macedoine,)</li>
		<li> jambon</li>
		<li>cornichon</li>
		<li>salade</li>
</div>
</body>

js

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
var spef;
 
function sandwich(spef){
 
 
var a=document.getElementsByName('contenu');
  for ( var z=0; z<a.length; z++){
 
     a[z].setAttribute("class","contenu");
      a[z].setAttribute("className","contenu");
  }
 
  document.getElementById(spef).className = 'aff';
 
 
}
/*   Ce qui peut marcher :
 
function sandwich(spef){
  document.getElementById('gr').className = 'contenu';
  document.getElementById('ca').className = 'contenu';
  document.getElementById('sa').className = 'contenu';
  document.getElementById('mo').className = 'contenu';
  document.getElementById('pa').className = 'contenu';
  document.getElementById('cr').className = 'contenu';
  document.getElementById(spef).className = 'aff';
 
}
*/

css

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
.onglet {
      display: inline-block;
     border: #6b8e23 2px solid;
     margin: 0px;
     padding : 10px;
     background-color: #a52a2a;
}
 
.contenu {
      display: none;
 
 
}
.aff {
      display :block ;
        border: #6b8e23 2px solid;
 
 
      font-size: 2em;
	  background-color: #8A2BE2; 
}
 
body {
      background-image: url(enseigne-pomme-de-pain.jpg);
 
}
 
li{
 
     margin-left : 500px;
 
}

**andry.aime** · 17/10/2009, 09h39

Bonjour,
Vire les attributs name sur les div et tu les appelles avec leur class.

Code :

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

1
2
3
4
5
6
7
function sandwich(spef){
for ( var z=0; z<document.getElementsByClassName('contenu').length; z++){
 
     document.getElementsByClassName('contenu')[z].className="contenu";
  }
  document.getElementById(spef).className = 'aff';
}

Tu as déclaré spef en variable globale, c'est inutile car spef est une variable en paramètre de la fonction.

**pierreconeille** · 17/10/2009, 22h29

Merci de ton aide andy

Cela ne marche pas, même sur firefox:
Lors du premier clic, on change de le ClassName en 'aff', si je clic sur un autre lien, le premiere 'aff' reste sur 'aff' . une idée?

**kernelfailure** · 18/10/2009, 12h53

C'est logique, si tu change tes classname puis que tu fais une recherche sur les classname, tous ceux que tu as modifiés vont ne plus être inclus dans ta selection.

N.B. : Ton dernier tag ul n'est pas fermé,
Mets des 'var' devant tes affectations (a, x, y)

Puisque ton premier schéma fonctionne mais que la redondance ne te plait pas, tu peux par exemple déclarer un tableau avec tes ids et sur cette base, faire une boucle pour initialiser ces ids avec ta classe par défaut.

**pierreconeille** · 18/10/2009, 23h21

Merci a tous, voyans que je ne maitrise pas toute ceci, je vais taffé toute vos proposition dans d'autre site. Et pour celle ci je vais juste noter numériquement mais id et initializer avec une boucle.

Merci beaucoup pour vos suggestion, vous me reverrez bientôt. c'est sur ^^

Pour finir, si vous auriez des tutoriel pour "getElementsByName" "getElementsByClassName" se sere bien.

**pierreconeille** · 18/10/2009, 23h23

Et si vous auriez également un tutoriel sur les incompatibilité Internet Explorer, se serez bien.
voila

Javascript et ie

JavaScript

Discussions similaires

Partager

Partager