Alterner hide et show [Résolu]

dominos · 10/11/2011, 21h41

Bonsoir,

je cherche à alterner (show/hide) l'affichage d'une div par l'évenement mousedown d'une image bouton.

j'ai l'impression de tourner en rond

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
window.onload = function() {
 
	var selectContainerList = $('#select_list'); // div (show/hide)
	var selectContainerBtn = $('#select_btn'); // img bouton
 
	$(selectContainerBtn).mousedown(function() {
 
		var selecIsFocus = false;
 
		if (selectContainerList.hide()||(selecIsFocus!=true)) {
			selectContainerList.show();
			selecIsFocus = true;	
		}
		else if (selectContainerList.show()||(selecIsFocus!=true)) {
			selectContainerList.hide();
 
		}
 
	});
 
};

Golgotha · 10/11/2011, 22h05

Bonsoir,

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
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script type="text/javascript">
 
 
     $(document).ready(function() {
  		$("#image").click(function () { 
      		$("#texte").is(":visible") ? $("#texte").hide() : $("#texte").show();
    		});
 		});
 
  </script>
 </head>
 <body>
 
 
 	<img id="image" src="http://www.lesite.com/telechargements/photos/44857_bestiole.png">
 	<div id="texte">
 
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
 
 	</div>
 
 </body>
</html>

Bovino · 10/11/2011, 22h08

Beaucoup de choses à redire...

Code :

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

window.onload = function()

Tu devrais commencer par les fondamentaux : $.ready()...

Code :

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

1
2
var selecIsFocus = false;
	if (selectContainerList.hide()||(selecIsFocus!=true))

Tu peux expliquer à quoi sert cette condition ???

Puisque tu viens d'affecter à selecIsFocus la valeur false, comment pourrait-elle ne pas être différente de true

D'autre part, quel est selon toi l'équivalent booléen de selectContainerList.hide() ?

Enfin bref... en plus simple :

Code :

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

1
2
3
4
5
$(function(){
    $('#select_list').mousedown(function(){
        $('#select_btn').toggle();
    });
});

dominos · 10/11/2011, 22h16

merci ça fonctionne impecable avec ce ternaire...

Code :

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

1
2
selectContainerList.is(":visible")?selectContainerList.hide()
:selectContainerList.show();

Bovino · 10/11/2011, 22h20

Une aversion pour toggle() ?

dominos · 10/11/2011, 22h22

Citation:

Envoyé par Bovino

Enfin bref... en plus simple :

Code :

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

1
2
3
4
5
$(function(){
    $('#select_list').mousedown(function(){
        $('#select_btn').toggle();
    });
});

fonctionne très bien aussi avec toggle();

que fait exactement cette fonction ?

dominos · 10/11/2011, 22h26

merci g trouvé la doc : http://jquery.jarodxxx.com/manuel/Le...ements/toggle/

je suis pas expert dans ces domaines j'apprend sur le tas.

merci pour ces conseils

Golgotha · 10/11/2011, 22h26

Citation:

Envoyé par Bovino

Une aversion pour toggle() ?

C'est moi le plus beau c'est tout

Bovino · 10/11/2011, 22h34

Citation:

Envoyé par Golgotha

C'est moi le plus beau c'est tout

Mouais... sauf que ta solution n'est valable que si les id sont uniques dans la page !

Golgotha · 10/11/2011, 22h40

Citation:

Envoyé par Bovino

Mouais... sauf que ta solution n'est valable que si les id sont uniques dans la page !

t'es jaloux parce que tu sais pas coder avec des id multiples c'est tout

dominos · 10/11/2011, 22h49

Autre pb, qd je clique ailleurs que dans le bouton et la div, je voudrais que la div se ferme, c'est pour ça que j'aivais une variable focus.

load c'est parce que j'utilise $(document.body).

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
window.onload = function() {
	var selectContainerList = $('#select_list'); // div
	var selectContainerBtn = $('#select_btn'); // img
 
	$(selectContainerBtn).mousedown(function() {
      selectContainerList.toggle();
	});
 
	 $(document.body).mousedown(function() {
		 if (selectContainerList.has(this).length == 0) {
		 //le click est en dehors du container; tu le hide
			 selectContainerList.hide();
	 }
 });
};

Bovino · 10/11/2011, 23h07

Citation:

load c'est parce que j'utilise $(document.body)

Désolé, mais je vois pas le rapport

Citation:

qd je clique ailleurs que dans le bouton et la div, je voudrais que la div se ferme

Code :

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

1
2
3
4
5
$(document).mousedown(function(e){
    if(!(e.target.id == 'select_list' || $(e.target).parents('#select_list').length)){
        selectContainerList.hide();
    }
});

dominos · 10/11/2011, 23h19

j'utilise body car je souhaite que le code javascript/jquery reste entre les balise head

Bovino · 10/11/2011, 23h33

C'est louable, mais je ne vois toujours pas le rapport...

La méthode ready() (ou ses équivalents) peut être dans le head, ça n'empêchera pas qu'elle sera appelée quand la page sera chargée.
$(document.body).mousedown( ici body n'est pas très utile : je te mets au défi de cilquer ailleurs que sur un élément du body dans la page

dominos · 17/11/2011, 12h16

Merci pour ces info, dans l'exemple que vous donnez, que fait cette ligne svp ?

Citation:

... $(e.target).parents('#select_list').length)){

Merci

Bovino · 17/11/2011, 13h47

e.target retrouve l'élément DOM sur lequel l'événement s'est produit.
$(e.target) transforme l'élément DOM en "élément" jQuery.
.parents('#select_list') sélectionne parmi les balises ancêtre celles dont l'identifiant est "select_list".
.length renvoie le nombre d'éléments trouvés, s'il n'y en a pas, length vaut zéro donc on rentre dans la condition et si tu cliques sur un élément qui n'est pas select_list ou qui n'est pas inclut dans select_list, ça masque la div.

dominos · 17/11/2011, 14h08

c'est vraiment bien ça, en désignant la liste ça englobe également les checkbox qui se trouve à l'intérieur.

juste une dernière question...

Code :

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

1
2
3
4
5
6
7
 		var selectContain = $('#select'); // div
	var selectContainerList = $('#select_list'); // div
	var selectContainerBtn = $('#select_btn'); // img
 
	$(selectContainerBtn).mousedown(function() {
      selectContainerList.toggle();
	});

Permet d'alterner l'affichage de la liste, l'image bouton se trouve dans une div, je voudrais que lorsqu'on down aussi sur la div, ça réagisse comme le bouton. Si je demande conseil pour cela c'est parce que c'est un peu nouveau pour moi la gestion des évènements et je ne sais pas comment gérer une condition IF depuis le code ci-dessus, et aussi parce qu'un exemple m'apprend beaucoup...

En tout cas merci encore pour toutes ces info.

Merci

Hijack · 17/11/2011, 15h28

Citation:

Envoyé par dominos

...l'image bouton se trouve dans une div, je voudrais que lorsqu'on down aussi sur la div, ça réagisse comme le bouton...

Si je comprend bien tu voudrais appliquer ".mousedown(...)" à '#select_btn' et à '#select' ?

Dans ce cas tu peux faire une sélection multiple comme ceci :

Code :

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

1
2
3
4
5
6
7
8
var selectContain = $('#select'); // div
var selectContainerList = $('#select_list'); // div
var selectContainerBtn = $('#select_btn'); // img

$(selectContainerBtn + ' ' + selectContain).mousedown(function() {
selectContainerList.toggle();
});

dominos · 17/11/2011, 16h28

Merci, en fait suffit de désigner le parent selectContainer:

Code :

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

1
2
3
$(selectContainer).mousedown(function() {
      selectContainerList.toggle();
	});

mais ça crée un conflit avec lignes suivantes:

Citation:

$(document).mousedown(function(e){
if(!(e.target.id == selectContainerList || $(e.target).parents('#flt_select').length)){
selectContainerList.hide();
}
});

du coup la liste ne souvre plus

dominos · 18/11/2011, 11h35

Ci-dessous une illustration

Le but donc est de cliquer sur la div (select(1) ou le bouton(2)) et alterner l'ouverture de la div liste (3). On peu alors sélectionner les radios ou checks sans qu'elle se ferme...

Si on clique sur le document en dehors de la liste ouverte, la liste se ferme.

Le soucis rencontré est que le clique sur le sélect n'est pas pris en compte pour ouvrir la liste mais seulement si je supprime ces lignes:

Citation:

// si down ailleur que sur le select, la liste, le bouton
$(document).mousedown(function(e){
if(!($(e.target).parents('#flt_select').length)){
selectList.hide();
}
});

Le code :

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
$(document).ready(function() {
 
	var select = $('#flt_select'); // div
	var selectBtn = $('#flt_select_btn'); // img
	var selectList = $('#flt_select_list'); // div
 
	// Si down sur div select ou bouton
	$(select).mousedown(function() {
      selectList.toggle();
	});
 
	// si down ailleur que sur le select, la liste, le bouton
	$(document).mousedown(function(e){
	    if(!($(e.target).parents('#flt_select').length)){
	        selectList.hide();
	    }
	});
 
	// Si : Echap
	$(document).keydown( function() { 
		if (event.keyCode == 27) {
			selectList.hide();
		}		
	});
 
});

Code :

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

1
2
3
4
5
6
<div id="select" class="select">
 <img id="select_btn" class="select_btn" src="public/images/select_btn.png">
 <div class="select_list" id="select_list" >
 ...radio...ou check
</div>
 </div>

Merci de votre aide.

10/11/2011, 22h20	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	Une aversion pour toggle() ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/11/2011, 23h33	#14
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	C'est louable, mais je ne vois toujours pas le rapport... La méthode ready() (ou ses équivalents) peut être dans le head, ça n'empêchera pas qu'elle sera appelée quand la page sera chargée. $(document.body).mousedown( ici body n'est pas très utile : je te mets au défi de cilquer ailleurs que sur un élément du body dans la page __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

17/11/2011, 13h47	#16
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 807 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 807 Points : 35 789 Points : 35 789	e.target retrouve l'élément DOM sur lequel l'événement s'est produit. $(e.target) transforme l'élément DOM en "élément" jQuery. .parents('#select_list') sélectionne parmi les balises ancêtre celles dont l'identifiant est "select_list". .length renvoie le nombre d'éléments trouvés, s'il n'y en a pas, length vaut zéro donc on rentre dans la condition et si tu cliques sur un élément qui n'est pas select_list ou qui n'est pas inclut dans select_list, ça masque la div. __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

10/11/2011, 22h26	#7
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	merci g trouvé la doc : http://jquery.jarodxxx.com/manuel/Le...ements/toggle/ je suis pas expert dans ces domaines j'apprend sur le tas. merci pour ces conseils
	00

10/11/2011, 23h19	#13
dominos Membre régulier Inscription : février 2009 Messages : 197 Détails du profil Informations forums : Inscription : février 2009 Messages : 197 Points : 71 Points : 71	j'utilise body car je souhaite que le code javascript/jquery reste entre les balise head
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email