Discussion :

[aliaspedro]

Bonjour. C'est la première fois que je poste ici cependant, je suis allé sur ce site à plusieurs reprises pour ces tutos complets (tellement à s'y perdre parfois ^^)
Je poste mon problème car depuis quelques temps, je n'ai pas réussi à trouver de solutions à mon pied.

Je suis en train de créer une galerie ergonomique, c'est à dire avec des images classées par catégorie (dessin, 3D...). Au départ, toutes les div sont fermés, c'est à l'utilisateur de cliquer sur une entête (appelé <div id="title1" class="title">) pour ouvrir la galerie correspondante. Si l'utilisateur clique sur une autre div, l'ancienne qui a été ouverte précédemment se referme.
Pour ce qui concerne les animations, je saurai faire, mais c'est le fonctionnement du système globale qui me préoccupe.

Voici mon code HTML :

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
<div id="galerie">
			<div class="title" id="title1">Dessin</div>
			<div id="genre1" class="genre" ></div>
 
			<div class="title" id="title2">3D</div>
			<div id="genre2" class="genre" ></div>
 
			<div class="title" id="title3">Photoshop, Illustrator</div>
			<div id="genre3" class="genre" ></div>
 
			<div class="title" id="title4">Mapping</div>
			<div id="genre4" class="genre"></div>
 
			<div class="title" id="title5">Autres Travaux</div>
			<div id="genre5" class="genre" ></div>
		</div>

Et mon code Javascript (Jquery)

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
$(document).ready(function(){
	display.init();
});
 
display ={
 
	init : function(){
                $(".genre").hide();
		$(".title").click(function(){
		display.id = $(this).attr("id"); //je stocke dans une variable le nom de l'id
		display.sub = display.id.substr(5,1); //je prends son dernier caractère qui est un chiffre
		display.open();
		});
	},
 
	open : function(){
		$("#genre"+display.sub).show(); //j'ouvre la div correspondante, dont l'id se termine par le même chiffre
		display.close();
 
	},
 
 
	close : function(){
		$(".title").click(function(){
			display.otherid = $(this).attr("id"); //je prends l'id de la nouvelle div ouverte
			display.othersub = display.otherid.substr(5,1); 
			if(display.sub != display.othersub || display.sub == display.othersub)
			{
				$("#genre"+display.sub).hide(); // si le dernier caractère est différent de celle de l'ancienne DIV ou égale, alors je la ferme. 
			}			
		});
	}
}

Là où ça bloque, c'est que j'arrive à ouvrir les blocs, mais quand j'en ouvre une deuxième, ça ne ferme pas la div ouverte précédemment. Du coup, je peux tous les ouvrir.
L'objectif de ce système est d'économiser de l'espace de la page et d'éviter un scrolling.

Je vous remercie.

[Bovino]

Ce que tu décris ressemble furieusement à un système d'onglets.

je suis allé sur ce site à plusieurs reprises pour ces tutos complets (tellement à s'y perdre parfois ^^)

Tu t'es peut-être perdu, mais la description d'un système d'onglets est déjà expliqué : Mise en place d'une navigation par onglets avec jQuery.

[aliaspedro]

Bonjour. Merci de ta réponse.

J'ai lu le lien que tu as posté, cependant, non, ce n'est pas un système d'onglet comme il est montré sur la page.

C'est autre chose, comme je l'ai marqué dans mon premier message, il y a un système de fermeture et d'ouverture de blocs pour montrer chaque galerie.

Cependant, je remarque qu'il y a peut être des choses à tirer de ce système d'onglet mais il faut juste que je prenne mieux connaissance du code pour le comprendre, car au premier coup d'oeil...

Merci =)

[Mahefasoa]

Bonjour,

Si je prends ce qui est écrit

Au départ, toutes les div sont fermés, c'est à l'utilisateur de cliquer sur une entête (appelé <div id="title1" class="title">) pour ouvrir la galerie correspondante. Si l'utilisateur clique sur une autre div, l'ancienne qui a été ouverte précédemment se referme.
(...)
Et mon code Javascript (Jquery)

Code :

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

1
2
3
4
5
6
7
8
//(...)
 
    open : function(){
        $("#genre"+display.sub).show(); //j'ouvre la div correspondante, dont l'id se termine par le même chiffre
        display.close();
 
    },
//(...)

Là où ça bloque, c'est que j'arrive à ouvrir les blocs, mais quand j'en ouvre une deuxième, ça ne ferme pas la div ouverte précédemment.

je fonctionnerai selon le principe suivant: quand j'ouvre un div, tous les autres div de même classe ouverts, quelque soit son ID, doivent être fermés. De ce fait, je vais m'assurer à ce qu'aucun div de même classe ne soit ouvert avant que j'ouvre celui de mon choix.
La méthode "open" va alors être légèrement modifiée comme suit:

Code :

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

1
2
3
4
5
open : function(){
  $("div.genre:visible").hide(); //je masque tous les div.genre ouverts (visibles) avant d'ouvrir un autre
  $("#genre"+display.sub).show(); //j'ouvre la div correspondante, dont l'id se termine par le même chiffre
  //display.close();
},

En espérant d'avoir pu vous aider.

Cordialement,
Thierry

[aliaspedro]

Bonjour. Merci pour ton aide.
Cependant, j'ai relu plusieurs fois ton raisonnement et j'ai regardé le code fournit et je n'ai pas tout compris. Par rapport à la ligne de code que tu as ajouté, qu'est ce que ça a changé dans le fonctionnement. Parce qu'à la base, normalement, les classes genre sont toutes cachées normalement.

Merci

[Mahefasoa]

Bonjour,

Temps T1:
1. aucun div de classe genre n'est visible
2. j'ouvre un div de classe genre
3. un div genre est maintenant visible

Temps T2:
1. au moins un div de classe genre est maintenant visible
2. j'ouvre un autre div de classe genre
2.a. je ferme (masque) tous les div de classe genre ouverts
2.b. j'ouvre LE div de classe genre que j'ai choisi
3. un div de classe genre est maintenant visible

Et cette étape Temps T2 sera tout le temps répétée à chaque fois que je décide d'ouvrir un autre div de classe genre.

Le fait de s'assurer qu'aucun div de classe genre ne soit visible avant que j'ouvre un autre de la même classe se traduit par le code suivant:

Code :

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

$("div.genre:visible").hide();

$("div.genre:visible") ne sélectionnera que les classes genre visibles à ce moment précis quel qu'il soit. Et cet (ces) objet(s) sont (seront) masqué(s) avant d'ouvrir un autre.

La question qui se pose maintenant est : cette méthode fonctionne-t-elle et répond à ce que tu souhaites obtenir ?

Si la réponse est non, peux-tu nous donner un exemple de code que l'on pourait éventuellement tester et modifier ?

Cordialement,
Mahefasoa

[aliaspedro]

Bonjour à toi =)

Un grand merci pour l'explication, je vois les choses plus clair. J'attendais d'avoir des explications.

Et bien, c'est véridique, ça fonctionne. A chaque fois que j'ouvre une div et que j'en ouvre une autre, ça ferme d'abord celle ouverte et ça ouvre l'autre.
Je me suis lancé récemment dans le Jquery, et il me reste que quelques notions en JavaScript à cause du manque de pratique (les bases ne s'oublient pas cependant )
Je comprends mieux le raisonnement.

Un grand merci, c'est résolu. =)

[aliaspedro]

Rebonjour.

Encore un grand merci pour la solution qui marche à merveille, pour le reste, je me suis débrouillé seul.

Cependant, je remonte ce sujet car j'ai un autre soucis toujours en lien avec le sujet.
C'est que lorsque je reclique sur une même div déjà ouverte, celle-ci se ferme et se réouvre automatiquement. Sûrement parce que le script écrit dit de fermer automatiquement tout autre div déjà ouverte mais ouvre sur celle qu'on clique.
Je voudrai que l'utilisateur puisse fermer cette même div ouverte.
Si vous comprenez ce que je veux dire.

Je cherche à comprendre comment on peut dire de fermer la div si on clique sur la même. Je sais qu'il y a un test à faire, mais c'est comment déclarer cette similitude qui me dérange. Sachant que j'ai déjà essayé de créer une nouvelle variable si je clique à nouveau sur une div et faire une comparaison entre l'ancienne et la nouvelle variable pour savoir si c'est la même div sur laquelle je clique.

Merci =)

(J'ai fait des recherches mais soit je me prends vraiment comme un manche et pourtant je regarde bon nombre de forums en essayant de piger leur code, soit tout simplement parce qu'aucun code est similaire à celui que j'utilise.)

[Mahefasoa]

Bonsoir,

Comme la discussion est taguée "Résolue", je pense qu'il serait mieux d'en ouvrir une nouvelle

Sinon, par rapport à ton souci, cela pourrait vraiment aider si tu postes tout le code HTML + JS.

Cordialement,
Mahefasoa