Discussion :

[Max33]

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]

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]

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]

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]

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]

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

[danielhagnoul]

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 !