style.display block, none.. IE et firefox

Version imprimable

Bonjour,

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
<script type='text/javascript'>
function ChangeDisplay(id)
	{
		//On cache tout ...
		var descriptions=new Array()
		descriptions = document.getElementsByName('description');
		for (var i=0;i<descriptions.length;i++)
		{
			descriptions[i].style.display='none';
		}
 
		//Et on affiche la bonne
		var etatcourant = document.getElementById(id).style.display;
 
		if (etatcourant=='block')
		{
			document.getElementById(id).style.display='none';
		}
		else
		{
			document.getElementById(id).style.display='block';
		}
	}
</script>

Voici le bout de code qui me pose un probleme.. enfin, deux problemes differents, un sur IE et un autre sur firefox..

Donc, pour resumer le comportement voulu, on a dix produits, chacun avec un lien "descriptif", quand on clique dessus, ca l'affiche, si on reclique dessus, ca la cache. Si la description d'un produit est affichée et qu'on clique sur le lien "description" d'un autre produit, ca cache celle qui est ouverte.. (il ne doit jamais y'en avoir qu'une seule d'affichée en meme temps)

Les soucis :
Sur IE, la description s'affiche et se cache correctement .. le souci vient du fait qu'il ne cache pas la description d'un produit quand on clique sur un autre descriptif.. (le bout de code "on cache tout")

Sur firefox, c'est l'inverse.. ce qui ne marche pas, c'est le fait de cacher la description quand on reclique sur le meme lien.. par contre quand on clique sur un autre lien ca cache bien la premiere avant d'afficher la deuxieme..

Ou sont les erreurs de code ? Merci !

Ah, et un bout d'html, histoire de..

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
      <div class='boite_sejour' id='PKG-4-5092-P4C3-DJ'>
	<a title='' href='/scripts/sejours/produits.php?id=PKG-4-5092-P4C3-DJ'>
 
		<img src='/ola/rdata/package/PKG-4-5092-P4C3-DJ/photo' width='83' height='55' border='0' class='img_sejour' alt=''/> 
	</a>
        <ul>   
              <li class='pays_sejour'><a title=' ' href='/scripts/sejours/produits.php?id=PKG-4-5092-P4C3-DJ'>Tunisie</a></li>     
              <li class='ville_sejour'>- <a title=' ' href='/scripts/sejours/produits.php?id=PKG-4-5092-P4C3-DJ'>Tunis</a></li>
              <li class='hotel_sejour'>Karthago Hammamet 5*</li>
              <li class='pension_sejour'>8j/7n Demi pension</li>
              <li class='departde_sejour'>d&#xE9;part de Paris</li>
 
		      <li class='prix_sejour'><a title=' ' href='../scripts/sejours/produits.php?id=PKG-4-5092-P4C3-DJ'>259 &#x80;</a></li>
		      <li class='descriptif_sejour'><a href='#description_PKG-4-5092-P4C3-DJ' Onmouseover="this.style.cursor='pointer'" Onmouseout="this.style.cursor='default'" Onclick='ChangeDisplay("description_PKG-4-5092-P4C3-DJ");'>Descriptif</a></li>
          </ul>
     </div>
     <div name='description' id='description_PKG-4-5092-P4C3-DJ' style='display:none;' class='description'>
 
 
Situation
<p>Situ&eacute; directement en front de mer au cour de la station baln&eacute;aire de Yasmine Hammamet, ce bel h&ocirc;tel de luxe est &agrave; environ 65km de l'a&eacute;roport de Tunis et &agrave; 7km &agrave; peine du centre de la vieille ville d'Hammamet. Au nord du golfe portant son nom s'&eacute;tend la toute premi&egrave;re station baln&eacute;aire de la riviera tunisienne : Hammamet, avec les villes voisines de Nabeul et de Yasmine. A Nabeul, au nord d'Hammamet, s'activent les meilleurs ateliers d'artisanat locaux : distillation d'essences florales de rose et de jasmin, articles en cuir, vaisselle en cuivre, bijoux en m&eacute;taux pr&eacute;cieux. et de la poterie r&eacute;put&eacute;e : on moule ici d'authentiques amphores depuis la plus haute antiquit&eacute;. A Yasmine, derni&egrave;re zone touristique en date au sud d'Hammamet, se concentrent golfs, centres de thalassoth&eacute;rapie, discoth&egrave;ques, marina de plaisance, casino, patinoire, parc d'attraction, un complexe de bars, restaurants et boutiques inspir&eacute; de l'architecture traditionnelle des m&eacute;dinas. jouxtant les h&ocirc;tels &agrave; l'arri&egrave;re de la longue promenade du front de mer. Terre de farniente et de loisirs, mais aussi terre d'histoire abondant de sites arch&eacute;ologiques antiques d'exception : l'un des legs majeurs de la civilisation romaine n'est-il pas dans ces oliveraies et ces vignobles dont on tire une gastronomie fine &agrave; l'huile d'olive et des vins rouges et ros&eacute;s d'appellation d'origine contr&ocirc;l&eacute;e ? Terre de nature, enfin, o&ugrave; l'on contemple la beaut&eacute; sauvage des c&ocirc;tes escarp&eacute;es de la presqu'&icirc;le du Cap Bon, face au d&eacute;troit de Sicile &agrave; l'est, et o&ugrave; le regard suit la courbe des plages du golfe d'Hammamet &agrave; l'ouest jusqu'&agrave; se perdre &agrave; l'horizon. <br />
 
<br />
</p>
     </div>

et y'a 10 bloc de ce genre par page..

Merci de votre aide, par avance !

03/08/2006, 12h29
tuxout

Salut
Je n'ai pas la réponse à ta question mais juste une observation, pourquoi ne pas utiliser une variable afin de stocker l'id du bloc courant comme ça tu seras précisément celui que tu devras cacher au prochain appel de la fonction.
03/08/2006, 12h32
zevince

c'est une idee a creuser.. je vais voir ca !
Sinon, si des bonnes ames ont d'autres idees..? surtout que je n'ai aucune erreur javascript..

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
<script type='text/javascript'>
var bloc_courant;
function ChangeDisplay(id)
	{
		//alert(bloc_courant);
 
		if(document.getElementById(bloc_courant))
		{
			document.getElementById(bloc_courant).style.display='none';
		}
 
 
		bloc_courant=id;
 
		//On cache tout ...
		var descriptions=new Array()
		descriptions = document.getElementsByName('description');
		for (var i=0;i<descriptions.length;i++)
		{
			descriptions[i].style.display='none';
		}
 
		//Et on affiche la bonne
		var etatcourant = document.getElementById(id).style.display;
 
		if (etatcourant=='block')
		{
			document.getElementById(id).style.display='none';
		}
		else
		{
			document.getElementById(id).style.display='block';
		}
	}
</script>

Voila la modif, quand j'active le "alert(bloc_courant)" ca met sort bien le bloc en question.. mais ca ne le cache pas !

03/08/2006, 13h19
tuxout
hmmmm ...
Je ne sais pas ça à l'air d'être correct, ça marche chez moi
tu peux toujours rajouter

Code:

alert (id+" - "+etatcourant+" - "+document.getElementById(id));

Attend chercherais tu à cacher au deuxième clic aussi ????
dans ce cas
Code:

1 2 3 4 5 6 if (id == bloc_courant) { document.getElementById(id).style.display = 'none'; bloc_courant = ''; return; }
03/08/2006, 14h33
marcha
Salut,

Tu fixes systèmatiquement la propriété display à none pour toutes
les descriptions en début de fonction.

Le test qui essaie de connaitre l'état courrant n'a plus de sens, ce
sera toujours none !

Tu peux éviter de toucher à la description qui concerne l'id en modifiant
ton code ainsi:
Code:

1 2 3 4 5 for (var i=0;i<descriptions.length;i++) { if(descriptions[i].id!=id) descriptions[i].style.display='none'; }

Bon, je me retrouve avec ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type='text/javascript'>
 
function ChangeDisplay(id)
	{		
		var descriptions=new Array()
		descriptions = document.getElementsByName('description');
		for (var i=0;i<descriptions.length;i++)
		{
			if(descriptions[i].id!=id) 
			{
				descriptions[i].style.display='none';
			}
			else
			{
				descriptions[i].style.display='block';
			}
		}
	}
</script>

ca marche impecc sur firefox..
Mais pas du tout sur IE.. ????
Quel est le probleme ?

03/08/2006, 14h53
zevince

Hmm..

j'ai rajouté ca :

Code:

alert(descriptions[i].id);

Sur firefox, on a bien la liste de tous les id..
Sur IE.. vide ..

Le problème... c'est IE :) il ne comprend pas getElementsByName on dirait.

voici un contournement possible:

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
 
<script type='text/javascript'>
 
function getDescriptions() {
	var d = new Array();
	var elements = document.getElementsByTagName('DIV');
	for(var i=0;i<elements.length;i++) {
		if(elements[i].getAttribute("name") == 'description') {
			d[d.length] = elements[i];
		}
	}
	return d;
}
 
function ChangeDisplay(id)
{		
	var descriptions=getDescriptions();
	for (var i=0;i<descriptions.length;i++)
	{
		if(descriptions[i].id!=id) 
		{
			descriptions[i].style.display='none';
		}
		else
		{
			descriptions[i].style.display='block';
		}
	}
}
</script>

03/08/2006, 15h14
zevince

Tu es un chef !
ca marche sur les deux, exactement comme il faut !
Merci beaucoup, une epine de moins dans mon pauvre pied ;-)