Problème de function multiples

**Max33** · 06/07/2009, 08h26

Salut à tous,
je viens auprès de vous après avoir passer un sacré bout de temps sur un problème que je n'arrive pas à résoudre.
J'essaie en fait de réaliser une slide box en jquery, en commençant sur le script suivant:
http://samuelgarneau.com/lab/slidebox/
Donc, au final ça marche bien, bien personnalisé et tout. Je l'ai paramétré pour qu'il soit en position relative sur la page et donc que l'on puisse l'utiliser plusieurs fois sur la même page, afin d'en faire un contenu déroulant.
Le problème vient à partir du moment où je veux faire 2 slidebox sur la même page : il y a un appel de la function qui se réalise pour les 2 slidebox en même temps, c'est-à-dire qu'en cliquant sur l'une, ça ouvre les deux autres en même temps. Et bien évidemment, ça bug pour refermer.
Cela peut donc venir du fait qu'il n'y a pas de séparation par nom des div où appliquer la slidebox. Mais voici l'appel de la function, dans le head de la page:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="js/slidebox.js"></script>
<script>
	$(document).ready(function(){
		$("#NomdelaDiv1").slideBox({width: "587px", height: "350px", position: "top"});
	});
	</script>
    <script>
	$(document).ready(function(){
		$("#NomdelaDiv2").slideBox({width: "587px", height: "355px", position: "top"});
	});
	</script>

Voilà, donc je ne comprends pas comment résoudre ce problème, je voudrais évidemment que quand l'on clique sur l'une, elle s'ouvre sans ouvrir l'autre, et inversement. Idem pour les fermer. Je pense à une limitation de l'execution de la function, mais je ne vois pas comment faire, et vu que l'on sépare déjà le nom de la div, ça me rend confus.
J'espère que vous pourrez m'aider! ^^
Le slidebox.js est dispo là:
http://samuelgarneau.com/lab/slidebox/slidebox.js

Merci d'avance!

**danielhagnoul** · 06/07/2009, 11h39

Bonjour

Code ! Essayer :

Code :

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

1
2
3
4
5
6
7
 
<script>
	$(document).ready(function(){
		$("#NomdelaDiv1").slideBox({width: "587px", height: "350px", position: "top"});
		$("#NomdelaDiv2").slideBox({width: "587px", height: "355px", position: "top"});
	});
</script>

**Max33** · 08/07/2009, 17h19

Ok, je viens donc d'optimiser le code par ta proposition. Mais pas de changement au problème...!
Peut-être que cela peut venir du JS? Vu que l'auteur prévoyait une utilisation sûrement unique du script sur une page....

**nabab** · 08/07/2009, 17h27

Dans ta fonction slideBox:

Code :

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

1
2
3
4
5
6
7
8
9
 
$(".slide-button").click(function(){
			if($(this).attr("id") == "close-button")
				$(divContent).animate({height: "0px"}, 1000);
			else
				$(divContent).animate({height: defaults.height}, 1000);
 
			$(".slide-button").toggle();
		});

Tu ne fais pas de différenciation sur ton $(".slide-button"), donc a chaque fois que tu appelles ta fonction, la fonction sur le clic est définie sur tous les éléments avec la classe slide_button, alors que cela ne devrait la définir que pour le slide_button contenu dans la slideBox que tu crée.

**Max33** · 09/07/2009, 22h23

Ah d'ac je vois.
J'ai essayé ainsi en déclarant la variable divPanel (déclaré par le contenu du div class=divPanel dans le JS) :

Code :

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

1
2
3
4
5
6
7
8
9
10
		// Buttons action
		$("divPanel.slide-button").click(function(){
			if($(this).attr("id") == "close-button")
				$(divContent).animate({height: "0px"}, 1000);
			else
				$(divContent).animate({height: defaults.height}, 1000);
			
			$("divPanel.slide-button").toggle();
		});
	};

Mais du coup ça bloque le script >_< donc il doit surement y avoir une erreur de syntaxe?
J'ai essayé de chercher sur google des cas de script où la fonction .click est utilisée sur une variable spécifique, mais je n'ai pas trouvé. A moins d'avoir mal cherché...

**nabab** · 09/07/2009, 22h54

$("divPanel.slide-button") ne veut rien dire
Si divPanel est l'ID du container, fais:
$("#divPanel .slide-button")
(n'oublie pas l'espace!)

**Max33** · 10/07/2009, 02h04

Merci pour ton aide, mais cela ne résoud pas le problème: suite aux changements, l'appel ne se fait plus, il n'y a rien plus rien qui se passe. Là j'avoue que je ne comprends plus

Voilà les modifs apportés, avec #divOne comme ID du container:

Code :

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

1
2
3
4
5
6
7
8
		$("#divOne .slide-button").click(function(){
			if($(this).attr("id") == "close-button")
				$(divContent).animate({height: "0px"}, 1000);
			else
				$(divContent).animate({height: defaults.height}, 1000);
 
			$("#divOne .slide-button").toggle();
		});

Je mets l'appel de la fonction au cas où, situé dans le <head> de la page:

Code :

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

1
2
3
4
5
6
<script type="text/javascript" src="js/slidebox.js"></script>
<script>
	$(document).ready(function(){
		$("#divOne").slideBox({width: "587px", height: "350px", position: "top"});
	});
	</script>

Mais là où je pense que ce dernier code n'est pas le problème, c'est que lorsqu'on remplace "#divOne .slide-button" par ".slide-button", on se retrouve certes avec le problème de départ, mais la fonction est correctement appellée...

**danielhagnoul** · 10/07/2009, 09h09

Envoyé par Max33

Ah d'ac je vois.
J'ai essayé ainsi en déclarant la variable divPanel (déclaré par le contenu du div class=divPanel dans le JS) :

divPanel serait donc une classe et non un id ?

Si vous nous donniez un lien vers votre page de test ce serait bien plus simple !

**Max33** · 16/07/2009, 16h02

Oui, ce serait plus concret je pense.
Voilà un lien illustratif:
http://zeldasecrets.phpnet.org/slidebox/index.php

(désolé du retard de réponse, problème de wifi...)

**danielhagnoul** · 16/07/2009, 23h59

Bonsoir.

Après 4 h 30 de panne de courant

j'ai enfin pu regarder votre page, hélas je ne m'y retrouve pas, je me perds dans une avalanche de tableaux enchevêtrés.

Code :

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

1
2
3
 
$("#classic").slideBox({width: "587px", height: "350px", position: "top"});
$("#medium").slideBox({width: "587px", height: "355px", position: "top"});

Suivant ce code il y a une
<div id="classic">...</div
et une
<div id="medium">...</div>
Or je ne trouve ni l'une ni l'autre.

À moins que plus malin que moi ne si retrouve, je vous conseille de repartir d'une simple demo du plugin et après avoir compris le mécanisme, d'essayer de l'appliquer à une seule animation de votre page, page simplifiée au maximum pour la circonstance.

**Max33** · 17/07/2009, 03h49

Arf, je m'excuse du peu de clarté possible dans la page

Et pourtant, ces bouts de codes sont présents:
<div id="classic">...</div>
le <div id="classic"> se trouve ligne 64 jusqu'au </div> ligne 86.

<div id="medium">...</div>
le <div id="medium"> est présent de la ligne 122 jusqu'au </div> à la ligne 144.

NB: attention à ne pas confondre avec les <div id="boxclassic"> ou <div id="boxmedium">, ils servent uniquement à mettre en forme dans le CSS.

**danielhagnoul** · 17/07/2009, 19h30

Bonsoir.

En fait, vous cherchez seulement à montrer ou cacher une division après un click sur un lien, un bouton ou une image.

Je vous conseille d'abandonner l'utilisation de ce

plug-in et d'utiliser une fonction de base du langage jQuery (voir http://docs.jquery.com/Effects) comme dans l'exemple suivant :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        /* TEST */
 
        div#infosUn {
            width:500px;
            height:auto;
            margin:12px;
            background-color:#FFFFCC;
            border:1px solid #999999;
        }
        div#infosUn div#infosUnPlus {
            width:inherit;
            height:auto;
            display:none;
            background-color:#FFCC66;
            border:1px solid #999999;
        }
        div#infosUn div#infosUnPlusBtn {
            padding:4px;
            background-color:#CCCCCC;
            border:1px solid #666666;
            text-align:right;
        }
 
        div#infosDeux {
            width:300px;
            height:auto;
            margin:12px;
            background-color:#CCFFFF;
            border:1px solid #999999;
        }
        div#infosDeux div#infosDeuxPlus {
            width:inherit;
            height:auto;
            display:none;
            background-color:#00FFFF;
            border:1px solid #999999;
        }
        div#infosDeux div#infosDeuxPlusBtn {
            padding:6px;
            background-color:#666666;
            border:1px solid #0033CC;
            text-align:right;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#btnInfosUnPlus").click(function(){
                $("#infosUnPlus").slideToggle(2500);
            });
 
            $("#btnInfosDeuxPlus").click(function(){
                $("#infosDeuxPlus").slideToggle(2500);
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
 
        <div id="infosUn">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
            </p>
            <div id="infosUnPlus">
                <p>
                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
                </p>
            </div>
            <div id="infosUnPlusBtn">
                <button id="btnInfosUnPlus" type="button">Plus de détails...</button>
            </div>
        </div>
 
 
        <div id="infosDeux">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit. Donec porttitor, urna nec tincidunt rhoncus, tortor purus lacinia turpis, et pellentesque purus dui sed massa. Vivamus tristique mauris quis quam. Aliquam commodo ipsum iaculis tortor. Curabitur pulvinar sem quis tellus. Vestibulum faucibus. Nam quis nisi. Donec justo risus, molestie a, lacinia eu, tincidunt in, lorem. Mauris ut nisi vel ipsum varius convallis. Sed sit amet orci. Vivamus ultricies sem vel dui. Vivamus venenatis, dolor at porta cursus, libero quam imperdiet orci, vel interdum mauris lorem et ligula. Morbi iaculis lacus luctus erat. In pretium, ipsum a lobortis convallis, leo lacus molestie purus, eget pellentesque est felis eu metus. Suspendisse a nisi. Praesent vitae eros vitae turpis auctor ullamcorper.
            </p>
            <div id="infosDeuxPlus">
                <p>
                Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis. Ut nibh massa, luctus commodo, cursus eu, ornare eu, nulla. In vitae felis in ligula tincidunt suscipit. Mauris fermentum, magna nec viverra tristique, magna purus scelerisque ipsum, vel accumsan enim dui eu eros. In hac habitasse platea dictumst. Praesent aliquet ipsum sit amet tellus. Vivamus elit est, rhoncus in, iaculis vel, pellentesque sit amet, quam. Nunc id libero eget dolor molestie hendrerit. Etiam odio lectus, venenatis ut, porta eu, luctus ut, libero. Morbi lacinia, urna in tristique fringilla, urna libero convallis velit, nec auctor neque nulla eget ante. Sed elementum.
                </p>
            </div>
            <div id="infosDeuxPlusBtn">
                <button id="btnInfosDeuxPlus" type="button">Plus de détails...</button>
            </div>
        </div>
 
    </div>
</body>
</html>

**Max33** · 30/07/2009, 22h49

Super, je viens donc d'essayer votre solution danielhagnoul, et ça marche du tonnerre. De plus c'est en effet beaucoup plus simple. :-)
Merci beaucoup pour votre aide!

Problème de function multiples

jQuery

Discussions similaires

Partager

Partager