11543 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je viens vers vous, car je sèche concernant un problème javascript avec une lightbox (videobox) via mootools.

Je m'explique :

Tout d'abord une introduction >>

J'ai une div modulable qui au survol de la souris s'agrandit et reprend sa taille initiale quand on quitte la div. Jusque là, rien de bien compliqué. 2 actions (mouseenter/mouseleave) permettant de réussir la chose avec une librairie jquery.
Dans cette div, j'ai un bouton, et quand je clique dessus, j'ai ma lightbox qui apparait. Initialement, étant donné qu'on quitte la div en ouvrant la lightbox, la div reprenait donc sont état initiale au click sur le bouton "id=openlb". Ne voulant pas de cela, et voulant que lorsque la lightbox apparaisse, ce soit comme si on était toujours dans la div, j'ai donc annulé l'effet "mouseleave" avec un "unbind" me permettant d'ouvrir ma lightbox sans que la div ne reprenne son état de base.

Le code ajouté pour le unbind du "mouseleave":
$("#openlb").click(function(){
    $('id-de-la-div-modulable-parente').unbind('mouseleave');
});


Si vous suivez jusqu'ici, c'est parfait. C'est ensuite que j'ai un problème.


Voici donc mon problème >>

Quand je ferme la lightbox à l'aide du bouton close "lbCloseLink", il se trouve que vu que j'ai annulé l'effet "mouseleave" pour fermer la div, la div reste ouverte. Je voudrais donc
réactiver l'effet "mouseleave" et donc désactiver l'effet "unbid" que j'avais mis lors de l'ouverture, à la fermeture de cette lighbox, soit au click sur le bouton close de la lighbox.
Pour celà, il me faut donc ajouter une action sur ce bouton de la lightbox.
Seulement, je ne sais pas comment m'y prendre !

J'ai deux bouts de code que je suspecte faire le boulot mais je ne sais quoi rajouter et où ?!

new Element('a').setProperties({id: 'lbCloseLink', href: '#'}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);


ou alors

close: function(){
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}


voici le fichier concerné :
http://videobox-lb.sourceforge.net/js/videobox.js


Merci d'avance pour votre aide.
Je suis sûr que c'est tout bête, mais je ne suis pas pro en javascript, et j'ai du mal à décrypter ce fichier videobox.js
Up !
Personne pour m'apporter une solution ?!

Pour ma part, j'ai trouvé où agir sur le code :

close: function(){
		location.reload(); /* Partie ajouté qui me permet le rechargement de la page - solution temporaire car je ne trouve pas cela très propre ! */ 
		alert('closed'); /* j'ai donc bien ma fenêtre de dialogue s'ouvrant ! */
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}


Mon problème se situe donc de rajouter un bout de code ressemblant à cela :

$("#lbCloseLink").click(function(){
    $('id-de-la-div-modulable-parente').bind('mouseleave');
});


Sauf que vu que vu qu'il s'agit de 2 javascripts, je pense qu'il faut certainement l'annoncer.
Annoncer "id-de-la-div-modulable-parente" qu'on va appeler "divA" et qui n'est d'ailleurs plus parente puisque l'on se trouve dans la div de la lightbox sur le bouton close.

le code aurait donc un style de ce genre :
this.click(function(){
    $('divA').bind('mouseleave');
});


ce qui donnerai >>

close: function(){
		this.click(function(){
                 $('divA').bind('mouseleave');
                });
		this.fx.overlay.start(0);
		this.center.style.display = this.bottomContainer.style.display = 'none';
		this.center.innerHTML = '';
		return false;
	}


Bien entendu, ce n'est pas la bonne syntaxe, c'est là que vous pouvez certainement m'aider.

Et il faudrait que ce soit un style div(n) car la div pourrait être aussi bien divA que divB etc.

Merci pour ceux et celles qui essaieront de m'aider.

Cordialement.