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.