Effet Toggle Script.aculo.us [Résolu]

[Nelieru]

Bonjour à toute la communauté ,

Mon souci aujourd'hui concerne la réalisation d'un effet toggle sur des éléments. Pour vous situer un peu, j'ai 2 div formant un menu, et je souhaite effectuer un effet de toggle sur les deux div (l'une par défaut étant plié (donc un toggle déjà fait) et l'autre étant déplié), donc lorsque j'ouvre une des div, l'autre se ferme.

En jQuery, rien de plus simple, suffit d'un petit element.slideToggle() et tout baigne.

Cependant, ayant des contraintes précises je dois utiliser Scriptaculous et Prototype. Voici le script actuel que j'ai réalisé, celui-ci s'exécute lors du click sur un bouton :

Code :

1
2
3
4
5
6
7
8
9
10
 
// Evènement lors d'un clique sur le bouton
$$('.block-menu-button').each(function(element) {
    element.observe('click', function() {
        // Boucle sur les 2 DIV
        $$('.block-menu-haut','.block-menu-bas').each(function(element) {
            Effect.toggle(element,'Blind');
        });
    });
});

Le défaut de ce code est son exécution, en effet lorsque je clique sur le bouton en question, il ne m'effectue qu'une exécution par click, c'est à dire que le premier click effectue un toggle sur la première div, et un second click permet d'effectuer le toggle sur l'autre DIV.

Logiquement vu que je boucle sur les 2 éléments, le toggle est censé se faire sur les 2 DIV dans le même click ?

[gwyohm]

Bonjour,

Je ne vois pas de problème sur ton code si ce n'est que Blind devrait être écrit sans la majuscule (blind)

On peut voir ton HTML ?
EDIT: rien à voir avec ton problème, mais ton code peut aussi s'écrire :

Code :

1
2
3
4
5
6
7
8
 
// Evènement lors d'un clique sur le bouton
$$('.block-menu-button').invoke("observe", "click", function() {
  // Boucle sur les 2 DIV
  $$('.block-menu-haut','.block-menu-bas').each(function(element) {
    Effect.toggle(element,'blind');
  });
});

[Bovino]

"element" est déjà une propriété de l'objet Event, l'utiliser comme nom de variable est assez maladroit et déconseillé.

[Nelieru]

Mon HTML est tout ce qu'il y a de plus basique :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
<div class="block-menu">
    <div class="block-menu-haut">
        <span class="block-menu-button">
        // Image
        </span>
    </div>
    <div class="block-menu-bas">
        <span class="block-menu-button">
            // Image
        </span>
    </div>
</div>

Etant donné que je viens tout juste de commencer prototype, c'est encore frais et je ne connais pas encore bien le système.
Il est donc très possible que j'écrive pas mal d'erreurs .

[gwyohm]

Mais dans ton exemple, tes deux elements sont visibles du debut, donc lors du premier click, tu vas masquer les deux...

[Nelieru]

Non du tout. En fait, le script toggle est stocké dans une fonction. Voila comment tout se déroule :

Code :

1
2
3
4
5
6
7
8
document.observe("dom:loaded", function() {
    $$('.block-menu-bas').invoke('toggle');
    toogleMenu();
});
 
function toogleMenu() {
// Fonction lancant le toggle
}

=> du coup j'ai bien un seul div ouvert .

EDIT:
Par contre, à l'origine la fonction toggle de scriptacoulous s'execute avec l'id de l'élement, hors je l'utilise ici en utilisant le nom de la classe de l'élement, donc je ne sais pas si ca peut agir sur le fonctionnement de la fonction toggle.

[gwyohm]

Envoyé par Nelieru

Par contre, à l'origine la fonction toggle de scriptacoulous s'execute avec l'id de l'élement, hors je l'utilise ici en utilisant le nom de la classe de l'élement, donc je ne sais pas si ca peut agir sur le fonctionnement de la fonction toggle.

Non, ce que tu fais est bien.

Peux tu essayer sans les effets :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
document.observe("dom:loaded", function() {
    $$('.block-menu-bas').invoke('toggle');
    toogleMenu();
});
 
function toogleMenu() {
  // Evènement lors d'un clique sur le bouton
  $$('.block-menu-button').invoke("observe", "click", function() {
    // Boucle sur les 2 DIV
    $$('.block-menu-haut','.block-menu-bas').each(function(elem) {
      elem.toggle();
       //Effect.toggle(elem,'blind');
    });
  });
}

[Nelieru]

Avec la fonction element.toggle() ca fonctionne.

EDIT:
Mais je souhaite utilisé cependant l'effet slide de scriptaculous et donc, Effect.toggle('slide') ou Effect.toggle('blind').

Le problème reste qu'il ne veut pas effectuer plusieurs toggle lors d'un même click...

[gwyohm]

Et bien il fallait aller au fond de la cave pour voir le souci:
Par défaut, le Effect.toggle limite la pile d'effets à 1 élément. Du coup seul un des deux était pris.

La solution consiste donc à préciser une option queue sans limite, mais avec un scope...

Code :

1
2
3
4
5
6
7
8
9
10
 
function toogleMenu() {
  // Evènement lors d'un clique sur le bouton
  $$('.block-menu-button').invoke("observe", "click", function() {
    // Boucle sur les 2 DIV
    $$('.block-menu-haut','.block-menu-bas').each(function(elem) {
      Effect.toggle(elem,'blind',{queue:{scope:'global'}});
    });
  });
}

@+

[Nelieru]

Et bien écoute, à force de persévérance, on a enfin pu trouver la solution et ca marche je viens de tester .

Donc je vous remercie encore pour le temps que vous avez passé à m'aider à résoudre mon problème.

Nelieru