Discussion :

[guillaumeabxl]

Bonjour à tous,

Je développe en ce moment un site sur base d'un CMS wordpress.
J'ai ajouté quelques fonctionnalités en java script. L'une d'elle me pose un léger souci.

J'ai utilisé un "toggle" pour fermer une div, sur cette même div j'ai plusieurs boutons dont un permettant de déplacer (drag handle) la div dans la page. Mon problème est que le "toggle" empêche le bon déplacement de ma div et les liens des autres boutons.

Lorsque l'on déplace la fenêtre avec le bouton "drag" on ferme en même temps la div. Je devrais définir et limiter la zone de "togggle" au bouton qui permet de fermer la div.

Voici la page en question :

http://www.actlightingdesign.com/wp/...e-flying-trunk

Et le code utilisé :

TOGGLE

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
	$(document).ready(function(){
 
	//Show (Collapse) the toggle containers on load
	$(".single-sidebar").show(); 
 
	//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
	$("h2.info-title").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; //Prevent the browser jump to the link anchor
	});
 
});

DRAGGABLE

Code :

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

$("#bloc_info").draggable({ handle: '.drag' });

Votre analyse est la bienvenue.
Merci pour vos commentaires d’amélioration.

[guillaumeabxl]

J'ai résolu mon problème, pour ceux que cela peut intéresser voici comment j'ai fait pour réduire une div via un clic sur une autre div.

Code :

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

1
2
3
    $(".close").click(function () {
      $(".info-content").toggle("blind", {}, 1000);
    });

Cela me permet d'avoir une div "info-menu" qui contient ma fonction "drag", des boutons de navigation et un lien pour fermer la div "info-content".

Voici la source de référence : http://docs.jquery.com/UI/Effects/toggle

J'ai également mis à jour mon code pour la partie draggable :

Code :

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

$("#bloc_info").draggable({ handle: '.drag' , opacity: 0.5 , containment: '.single-portfolio' });

cela permet de réduire la transparence de la div de 50% tout en la contraignant à ne pas sortir de la fenêtre du navigateur et de rester au sein de la div "single-portfolio".

à plus,

[danielhagnoul]

Bonsoir

API et démonstration avec code source de UI Toggle : http://jqueryui.com/demos/toggle/