Javascript et ie

Version imprimable

Javascript et ie

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:

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:

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:

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

16/10/2009, 19h52
Bovino

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.

Béarnaise pas nesse ! :mouarf:

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

Code:

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>

non resolu

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:

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

16/10/2009, 21h39
Bovino

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...
16/10/2009, 22h19
kernelfailure

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

poursiuvons

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

Citation:

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:

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>

Code:

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:

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

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

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.

17/10/2009, 22h29
pierreconeille

poursiuvons

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?
18/10/2009, 12h53
kernelfailure

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.
18/10/2009, 23h21
pierreconeille

merci a tous

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.
18/10/2009, 23h23
pierreconeille

re merci

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