Discussion :

[tutomania]

Bien le bonjour à tous.

Je me casse la tête comme un fou sur un script mootools.
Le bien connu accordion mootools.

Demo ici : http://demos.mootools.net/Accordion

Tout fonctionne bien avec le code ci-dessous (j'ai épuré le code et laissé les évènements au cas ou).

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.addEvent('domready', function() {
var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
opacity: true,show:0,
onActive: function(toggler, element){
 
},
onBackground: function(toggler, element){
 
},
onComplete: function(toggler, element){
 
}
 
});
});

Ce que je voulais faire c'est que le menu "s'accordéonne" tout seul.
J'ai donc trouvé ce bout de code qui je rajoute dans onActive

Code :

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

var myTimer = this.display.delay(10000, this, (this.previous + 1) % this.togglers.length);

Tout ce passe à merveille le menu s'active tout seul.

La ou réside le problème est que je voudrais que myTimer s'arrête de fonctionner si on clique sur un toggler parce qu'actuellement si on clique sur un toggler le timer ne s'arrête pas et très rapidement le menu s'emballe dans tous les sens.

Je me doute que si je laisse myTimer dans onActive j'y arriverai pas ?
Aussi j'ai tenté des dizaines de solutions mais rien ne fonctionne

J'arrive à lancer un évènement lors du clic (genre un alert() :p) mais je n'arrive pas du tout à stopper display.delay.

J'espère avoir été clair
J'ai la tête qui éclate du coup.

Merci à tous.

[vermine]

Bonjour,

En mettant myTimer comme variable globale, avez-vous essayé de faire ceci ?

Code :

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

1
2
 
$clear(myTimer);

[tutomania]

Bonjour Vermine (lol)

Oui tout à fait j'ai testé et en le mettant par exemple dans onComplete.
Mais cela ne fonctionne pas.

L'idéal serai de lancer le delay hors évènement onActive etc.
Cela pourrais surement fonctionner ensuite avec $clear(myTimer).

Comment puis-je réussir à mettre myTimer en dehors des évenements onActive, onComplete et onBackground. J'ai tenté de remplacer le "this" mais je ne trouve pas la syntaxe correct apparemment

Merci par avance

EDIT: Comment procéder pour mettre ma variable en global s'il vous plait ?
Actuellement elle figure dans onActive.

EDIT 2:

Bon je peux te dire que le $clear fonctionne car j'ai mis ce code :

Code :

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

1
2
3
4
5
6
7
8
9
window.addEvent('domready', function() {
var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
opacity: true,show:0,
onActive: function(toggler, element){
var myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
var myTimer = $clear(myTimer);
}
});
});

Et le défilement ne se produit plus, normal puisque que le clear s'execute après le lancement du delay. Si j'inverse les deux le défilement fonctionne, cependant toujours le même problème lorsque je clique il lance plusieurs instances le menu deviens fou très rapidement

[vermine]

Essayez toujours de déclarer le timer en dehors de l'accordéon, sinon en dehors du domready.
Puis vous faites le clear dans le onComplete. Mais il faut tester tout ça car je fais des suppositions.

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.addEvent('domready', function() {
 
   var myTimer;
 
   var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
      opacity: true,show:0,
      onActive: function(toggler, element){
         myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
      },
      onComplete: function(toggler, element){
	 var myTimer = $clear(myTimer);	
      }
   });
});

[tutomania]

bon ça avance :

J'arrive à arrêter le défilement avec :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
window.addEvent('domready', function() {
var test = 1;
 
$('accordion').addEvent('click', function() { test = 2;  });
 
var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
opacity: true,show:0,
onActive: function(toggler, element){
if(test==2) { myTimer = $clear(myTimer);}else{ myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);}
}
});
});

Le problème qui réside maintenant est lors du clic cela arrête le défilement mais pas le delay précédemment déclaré. De ce fait le slider s'arrete mais une instance plus tard.

[vermine]

Excusez-moi, vous pourriez me mettre un peu plus de code pour que je puisse tester chez moi ?

[tutomania]

Pas de problème,
je vais même te mettre un rar à disposition avec tous les éléments.

Je prépare ça de suite et je reviens.

[tutomania]

Alors voici le zip en question : http://www.website-modern.fr/mootools.zip

Voici un rapide état des lieux

Si tu laisses le menu sans rien toucher il défile parfaitement.
Si tu cliques sur le menu ACTIF cela stoppe bien le défilement c'est parfait
Par contre si tu cliques sur un élément qui est INACTIF il va se déplier (normal) mais le delay précédent n'est pas arrété. Il s'arretera qu'au prochain défilement.

Merci de ton aide Vermine, j'apprécie grandement

Edit : en fait je pense que myTimer est lancé et lorsque qu'on clique sur un element un autre myTimer est généré, le $clear(myTimer) "kill" la dernière instance de myTimer mais pas celle générée avant. Il serait peux être intéressant de regarder comment "killer" toutes les instances et pas uniquement myTimer. C'est une idée comme ça que je viens d'avoir Je vais faire des tests En tous les cas sur la toile on ne trouve pas vraiment de solution, je pense que si on réussi ça pourrais servir à moulte personnes

[vermine]

Ha ben je me rend compte que le onComplete n'est pas ce que je pensais.

Ceci fonctionne partiellement:

Code js :

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
 
var test = 1;
var myTimer;
 
window.addEvent('domready', function() {
 
 
		$('accordion').addEvent('click', function() { 
			$clear(myTimer); 
			test++;
			});
 
		var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
			opacity: true,show:0,
			onActive: function(toggler, element){
			},
			onComplete: function(){
				if(test>2) { 
					$clear(myTimer); 
				}else{ 
					myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
				}
			}
	});
 
 
});

Par contre, il faut encore retravailler cela car au démarrage, ça ne se lance pas (forcément). Il faut en ouvrir d'abord un pour que le défilement continu se lance, puis cliquer pour l'arrêter.
Second problème; ça ne fonctionne pas du tout sur IE (le script précédent non plus en fait).

[vermine]

Il y a de l'idée en faisant ceci:

Code js :

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

1
2
3
4
5
6
7
 
onActive: function(toggler, element){
	if(test2<2) { 
		myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
		test2++;
        }
}

en déclarant var test2 = 1; au dessus. Mais ça ne fonctionne que si l'on clique sur l'actif (toujours logique). Donc il faudrait voir à mettre ce code plutôt dans le onComplete mais je n'ai pas encore trouvé où ni comment exactement et malheureusement, je quitte l'ordinateur. :-s

Bon courage, on y est presque. =)

[vermine]

Voici donc quelque chose qui pourrait vous convenir. Il y a sûrement une méthode plus propre.

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
 
var test = 1;
var test2 = 1;
var myTimer;
 
window.addEvent('domready', function() {
 
	//Si on clique, on arrête le timer	
	 $('accordion').addEvent('click', function() { 
		 $clear(myTimer); 
		 test++;
	 });
 
	 var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		 opacity: true,show:0,
		 onActive: function(toggler, element){
                         //Premier passage, on lance le timer
			 if(test2<2) { 
				 myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
				 test2++;
                          }
 
		 },
		 onComplete: function(){
                         //chaque fois qu'on a déplié, on vérifie si on a cliqué ou pas
                         //étonnament on ne passe pas ici lors du premier passage
			 if(test>1) {
				 $clear(myTimer); 
			 }else{ 
				 myTimer = this.display.delay(3000, this, (this.previous + 1) % this.togglers.length);
			 }
		 }
	});
});

Et bonne nouvelle, ça fonctionne aussi sur IE. Ce qui me parait logique, mais tantôt je n'y parvenais pas.

PS: attention, il y avait une virgule qui trainait dans votre code après le onComplete.

[tutomania]

Merci je test de suite

[tutomania]

Excellent Vermine !
Ça fonctionne enfin !

J'ai une de ces joie la ahah
Merci beaucoup.

En décryptant ton code j'ai bien saisi le fonctionnement et c'est vraiment bien pensé en fait ! J'avais pas du tout pensé à tester si il y a eu un clic sur le onComplete. Franchement bien vu

Merci encore d'avoir pris du temps pour m'aider, j'apprécie grandement.
A charge de revanche Vermine

[vermine]

Le plaisir est partagé.