[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+

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

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.) ...

Pour les précisions mes divs sont fermés à l'ouverture de la page ils peuvent être ouvert ou fermer avec un simple clic sur une image elle aussi contenu dans ma boucle.

Donc si un visiteur clic sur une image il affiche le div correspondant qui donne des infos sur l'image seulement si il ouvre une autre div il se retrouvera avec 2 divs ouverte et ainsi de suite ...

J'aimerais donc que mon visiteur ne puisse pas ouvrir plus d'une div, donc il faudrait que si il clique sur une autre image, sa div précédament ouverte se ferme (ou toutes les divs se ferme ce qui revient au même)

J'ai utilisé ton code ainsi :

Code :

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

1
2
3
4
5
6
7
8
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; 
	}

Et l'image pour l'appeller

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']; ?>')" >

Concernant la méthode de Lagotonio j'aimerais préserver cette technique que je comprend plus ou moins ...

**lagotonio** · 08/08/2007, 14h05

Ce n'est pas parceque un code est long qu'il est très compliqué

En l'occurence là il est plutôt simple non ? la moitié c'est du HTML ! une fonction qui récupére les div par rapport à un élément conteneur, et les masque et ensuite affiche la div voulu.

Tu as déjà utilisé prototype ?

Sinon c'est évident qu'il doit y avoir plus simple comme méthode. Pour mieux comprendre mon code, download la librairie prototype et test le code que j'ai mis dans un fichier html.

**Overstone** · 08/08/2007, 14h10

Non je n'ai jamais utiliser prototype, je vais comme même tester ta technique demain car la je travaille sur un autre aspect de mon site, j'attend comme même d'autres propositions pour pouvoir bien travailler la-dessus demain

**E.Bzz** · 08/08/2007, 15h06

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
<html><head><title>Test</title>
<script type="text/javascript">
var div_affiche="";
function Affiche(id_div) {
 if (document.getElementById(div_affiche))
 	 document.getElementById(div_affiche).style.visibility="hidden";
 document.getElementById(id_div).style.visibility="visible";
 div_affiche=id_div;
 }
</script>
</head>
<body>
<input type="button" value="1" onclick="Affiche('d1');">
<div id="d1" style="background-color: red;visibility:hidden;">
toto
</div>
<input type="button" value="2" onclick="Affiche('d2');">
<div id="d2" style="background-color: blue;visibility:hidden;">
titi
</div>
<input type="button" value="3" onclick="Affiche('d3');">
<div id="d3" style="background-color: green;visibility:hidden;">
tutu
</div>
</body></html>

Testé sous IE6 et FF2 : aucun problème

**lagotonio** · 08/08/2007, 15h32

En effet ta solution est plus simple, que la mienne et sans doute plus performante car pas de boucle !

Par contre je pense qu'il faut mieux utiliser la propriété de style display='none' ou display='block' que la propriété visibility non ? la seconde masquant mais prend la même place que si elle n'était pas masqué ?

**E.Bzz** · 08/08/2007, 15h38

Envoyé par lagotonio

Par contre je pense qu'il faut mieux utiliser la propriété de style display='none' ou display='block' que la propriété visibility non ?

Aucune n'est "mieux" ou "moins bien" que l'autre : ça dépend du besoin (de la structure et du fonctionnement de la page) ...
Mais ça n'a pas d'impact sur le fonctionnement du script.
... sauf avec display, pour IE7, c'est "" au lieu de "block"

A+

**scougirou** · 08/08/2007, 16h07

Je plussoie sur Prototype !
Ca change la vie !
les $() et $$() m'ont fait gagné un temps inimaginable !

le site de sergio pereira qui explique super bien comment ca marche :
http://www.sergiopereira.com/articles/prototype.js.html

Sinon une deuxième technique un peu plus sale mais super rapide serait de stocker l'ID du div ouvert dans une variable globale.
genre

Code :

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

1
2
3
4
5
6
7
8
var div_courant="";
 
function mon_click(mon_id)
{
  $(mon_id).style.display="block"; // equivalent cross browser de ddocument.getelementbyid de Prototype
  $(div_courant).style.display="none"; // plutot pratique, non ?
  div_courant=mon_id;
}

3 lignes...

PS : Prototype possède aussi une méthode toggle qui fait plus ou moins ce que tu veux ! (juste pour dire un peu plus que Prototype c'est bien

)

EDIT : ah ben vi c'est la solution de E.bzz, silly me

, mais je laisse quand même pour dire que Prototype c'est méga-pouce !!!

**E.Bzz** · 08/08/2007, 16h52

Envoyé par scougirou

mais je laisse quand même pour dire que Prototype c'est méga-pouce !!!

Oui ... sauf qu'ici, ça n'apporte rien, si ce n'est un include inutile

**Overstone** · 08/08/2007, 17h36

Je débute en javascript donc tous sa me parait encore flou,

J'ai assez bien compris la méthode de Scourigou, j'imagine que celle si ne peut marcher qu'avec Prototype ce qui a la limite m'arrange pour en apprendre un peu plus ..

J'ai l'impression que les autres techniques même si je me trompe petetre ne peuvent pas résoudre mon pb.

Donc je vais essayer tous sa demain Sa va pas être facile

**mikaweb** · 08/08/2007, 18h08

Je tombe à pic

Je vais utiliser la version de E.Bzz à moins qu'utiliser protoype soit mieux ?

Merci

Je n'ai pas bien compris le but d'utiliser plusieurs librairies comme jquery,scriptaculos,prototype, etc.. en même temps.

Elles ne font pas toutes la même chose je suppose, mais est-ce bien de mélanger leur utilisation dans une même page ?

**Overstone** · 09/08/2007, 02h37

J'ai utilisé la technique de E buzz qui me parait la plus simple et tout marche plutôt bien par contre j'aimerais pouvoir indiquer une class plutôt q'un style

Par exemple au lieu de

Code :

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

document.getElementById(id_div).style.visibility="visible";

Afficher plusieurs style indiqué dans ma feuille de style en appellant une class

Ce simple détail résouderait mon probleme

seulement j'ai essayé pas mal de truc .. mais je ne trouve pas comment faire

Sinon mon ancienne technique proposer plusieurs solutions pour les navigateurs plus ancien, niveau optimisation peut-on faire pareille avec celui-ci ???

Au cas ou voila de quel code il s'agit :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script type="text/javascript">
var div_affiche="";
function Affiche(id_div) {
 if (document.getElementById(div_affiche))
 	 document.getElementById(div_affiche).style.visibility="hidden";
 document.getElementById(id_div).style.visibility="visible";
 div_affiche=id_div;
 }
</script>

**E.Bzz** · 09/08/2007, 09h20

Envoyé par Overstone

j'aimerais pouvoir indiquer une class plutôt q'un style

Code :

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

document.getElementById(id_div).className="une_autre_class_css";

A+

**Overstone** · 09/08/2007, 09h45

salut,

j'ai fais comme tu ma dis, seulement sa marche mais les div reste ouvert

voici mon code

Code :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
		var div_affiche="";
		function Affiche(id_div) {
		if (document.getElementById(div_affiche))
			document.getElementById(id_div).className="infoCache";
			document.getElementById(id_div).className="nocache";
			div_affiche=id_div;
		}
		</script>

mes div on à la base un style infoCache je ne sais vraiment pas pourquoi mon code ne se comporte pas comme ton exemple ????

En clair dés que je clique sur un div il souvre en laissant les autres ouvert, voici le reste de mon code

Code :

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

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

[DOM] Montrer/Cacher des blocs DIV

JavaScript

Discussions similaires

Partager

Partager