[DOM] Montrer/Cacher des blocs DIV

**Overstone** · 08/08/2007, 02h24

Bonjour,

J'utilise un script pour montrer/cacher des divs tout marche bien par contre j'aimerais rendre impossible le fait que deux divs soit ouvert à la fois

Car mes divs caché ou découvert sont contenu dans une boucle php qui génére son contenu à partir de SQL et une partit des elements généré est caché (un simple clic sur une image les découvre et les re-cache)

En plus de sa mes div sont nommé par l'id contenu dans ma bd sql donc il sont tous different, ce qui ne facilite rien

...

Voici mon code javascript avec une fonction DivStatus pour découvrir et DivStatus Off pour caché.

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
 
function DivStatus( nom, numero )
		{
			var divID = nom + numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'infoCache' ) ? 'nocache' : 'infoCache';
				}
		}
 
	function DivStatusOff( nom, numero )
		{
			var divID = nom + numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'nocache' ) ? 'infoCache' : 'nocache';
				}
		}

En php j'appelle la fonction DivStatus( nom, numero ) avec cette image elle aussi généré par SQL

Code :

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

1
2
 
<img src="contrib/<?php echo $donnees['fichier']; ?>" class="affiche" onclick="DivStatus( 'info', '<?php echo $donnees['id']; ?>' )" >

L'id est un code uniqid créer en php.

J'ai essayé de me débrouillé avec Onblur mais sa ne marche pas.

Pour résumé il faudrait que quand l'on clique sur une autre image qui n'a donc plus la même id, toutes les div ou la div ouverte (peu importe sa revient au même) soit fermé avant d'en ouvrir une autre.

PS: J'ai dans mon tutoriel ou j'ai apprit à ouvrir et fermer des div une fonction
qui permet de tout cacher (ci-dessous) seulement elle prend le prefixe et le numéro du div seulement moi j'ai remplacé ce numéro par un id unique ce qui rend je pensse inutile cette fonction qui m'aurait aidé.

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
 
function CacheTout( nom )
		{	
			var NumDiv = 1;
			if ( document.getElementById ) // Pour les navigateurs récents
				{
					while ( document.getElementById( nom + NumDiv) )
						{
							SetDiv = document.getElementById( nom + NumDiv );
							if ( SetDiv && SetDiv.className == 'infoCache' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.all ) // Pour les veilles versions
				{
					while ( document.all[ nom + NumDiv ] )
						{
							SetDiv = document.all[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'infoCache' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
			else if ( document.layers ) // Pour les très veilles versions
				{
					while ( document.layers[ nom + NumDiv ] )
						{
							SetDiv = document.layers[ nom + NumDiv ];
							if ( SetDiv && SetDiv.className != 'infoCache' )
								{
									DivStatus( nom, NumDiv );
								}
							NumDiv++;
						}
				}
		}

Je pensse que mon pb est trés difficile à comprendre donc n'hésitez pas à me poser des questions

Merci d'avance pour votre aide car la je suis vraiment bloqué

**scougirou** · 08/08/2007, 10h26

Bon je suis pas certain d'avoir tout compris mais en tout cas quand j'ai besoin d'afficher ou de masquer des div, je passe par les display:none ou block...

Le seul piège avec cette méthode est qu'il faut bien penser à mettre le style dans la balise de ton div, mais sinon ça marche tip-top.

Code :

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

1
2
<div id="mon_div1" style="display:block" onclick="check()">blablabla</div>
<div id="mon_div2" style="display:none" onclick="check()">blublubul</div>

et puis

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
 
function check()
{
var div1=getelmentbyid("mon_div1");
var div2=getelmentbyid("mon_div2");
 
if(div1.style.display=="none")
  { 
     div1.style.display="block";
     div2.style.display="none";
  }
else
  {
     div1.style.display="none";
     div2.style.display="block";
  }
 
}

Bon, c'est fait à l'arrache et de mémoire, mais l'idée est là !
Bon courage.

**Overstone** · 08/08/2007, 12h04

Oui à vu de nez je pense que tu a compris mon probleme seulement moi j'ai plus de 100 div que l'on peut ouvrir ou fermer à volonté et ces 100 div on tous un id composé d'un préfixe suivi d'un uniqid de 13 chiffres.

Donc ta technique serait fastidieuse à utiliser.

Pour résumer mon probleme il faudrait que mes visiteurs ne puisse pas avoir deux div en même temps ouvert si il en ouvre un autre, le précédent encore ouvert est automatiquement fermé

**E.Bzz** · 08/08/2007, 12h16

Bonjour,

Envoyé par Overstone

moi j'ai plus de 100 div que l'on peut ouvrir ou fermer à volonté et ces 100 div on tous un id composé d'un préfixe suivi d'un uniqid de 13 chiffres.

Code :

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

1
2
3
4
5
6
7
var div_affiche="";
function Affiche(id_div) {
if (document.getElementById(div_affiche)) // Nécessaire pour éviter une erreur le 1° coup (sauf si un div est affiché par défaut => initialiser div_affiche)
document.getElementById(div_affiche).style.display="none";
document.getElementById(id_div).style.display="block";
div_affiche=id_div;
}

A+

**Overstone** · 08/08/2007, 12h51

Salut,

j'ai essayé ta fonction mais sa ne marche pas.

Il y a t'il des choses à modifer ou à adapter ??
j'ai tenté de l'executer ainsi

Code :

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

<img src="contrib/<?php echo $donnees['fichier']; ?>" class="affiche" onclick="Affiche('<?php echo $donnees['id']; ?>')" >

J'aimerais par contre conserver ma fonction de base qui me parait adapter et optimiser, a moins que je me trompe ??

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
function DivStatus( nom, numero )
		{
			var divID = nom + numero;
			if ( document.getElementById && document.getElementById( divID ) ) // Pour les navigateurs récents
				{
					Pdiv = document.getElementById( divID );
					PcH = true;
		 		}
			else if ( document.all && document.all[ divID ] ) // Pour les veilles versions
				{
					Pdiv = document.all[ divID ];
					PcH = true;
				}
			else if ( document.layers && document.layers[ divID ] ) // Pour les très veilles versions
				{
					Pdiv = document.layers[ divID ];
					PcH = true;
				}
			else
				{
					PcH = false;
				}
			if ( PcH )
				{
					Pdiv.className = ( Pdiv.className == 'infoCache' ) ? 'nocache' : 'infoCache';
				}
		}

Il me suffirait petetre de l'adapter pour ce que je veus faire

**lagotonio** · 08/08/2007, 13h22

Moi je ferais comme ceci (j'explique le principe)

J'utilise souvent la librairie prototype qui ofre des fonctionnlités très poussées de gestion de l'arbre DOM en javascript.

Il faut à mon avis ne plus tenir compte de tes id que tu généres de façon auto dans ton php, mais utiliser l'arbre DOM.

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
 
<html>
<head>
<script type="text/javascript" src="../libjs/prototype.js">&nbsp;</script>
<style type="text/css">
#mesProduits div{
height:50px;
width:200px;
background-color:red;
margin:10px 0 10px 0;
}
 
#mesProduits a{
display:block;
}
#mesProduits .cache{
display:none;
}
</style>
<script type="text/javascript">
function montreDiv(id){
//avec prototype $(id) est un raccourcis pour document.getElementById('id');
cacheTouteLesDiv('mesProduits');//je commence par cacher toutes mes div
$(id).style.display='block';//puis je fais apparaitre la bonne
}
 
//element est le id de ta div qui contien toutes tes divs
function cacheTouteLesDiv(element){
var divContenante = $(element);
var mesdiv = divContenante.getElementsByTagName('div');
var mesdiv = $A(mesdiv);//permet de transformer ton objet mesdiv en tableau (grace a prototype)
mesdiv.each(//boucle each qui declenche la fonction ci-dessous a chaque tour
	function(div){
	div.style.display='none';//tu cache toutes les div qui sont contenues dans ta div mesProduits
 
 
	}
);
//alert(ligneTableau);
 
}
</script>
</head>
<body>
<div id="mesProduits">
<a href="javascript:void(montreDiv('1'));">Afficher div1</a>
<div class="cache" id="1">Le contenu de ma div 1</div>
<a href="javascript:void(montreDiv('2'));">Afficher div2</a>
<div class="cache" id="2">Le contenu de ma div 2</div>
<a href="javascript:void(montreDiv('3'));">Afficher div3</a>
<div class="cache" id="3">Le contenu de ma div 3</div>
<a href="javascript:void(montreDiv('4'));">Afficher div4</a>
<div class="cache" id="4">Le contenu de ma div 4</div>
</div>
 
</body>
 
</html>

En espérant que cela soit claire, j'ai du faire rapide.

PS : Librairie prototype ici

**E.Bzz** · 08/08/2007, 13h48

Comment rendre (très) compliqué un traitement tout simple

Envoyé par Overstone

j'ai essayé ta fonction mais sa ne marche pas.

Fais voir comment tu l'as intégré : il doit manquer quelquechose (ou tu as oublié une précision : y a t-il des div affichés par défaut, par ex.) ...

A+

[DOM] Montrer/Cacher des blocs DIV

JavaScript

Vue hybride

Discussions similaires

Partager

Partager