[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