Forum : [TUTO HAMMER.JS] Swipe avec Hammer.js

Bonjour !

J'ai suivi le tuto sur la gestion des évènements tactiles avec Hammer.js. Je tente d'utiliser le swipe left pour décaler mon menu. Pour info, ma page web a la même structure que le tuto sur le menu responsive (avec l'icone hamburger).
J'ai bien déclaré le fichier JS où se trouve la librairie Hammer.JS (le site officiel ayant subit qq modif', j'ai du fouiller sur Google un plugin jQuery pour Hammer.JS, que j'ai trouvé et que j'ai inclus dans le même fichier que la librairie. La console ne s'affolant pas, je pense que ça fonctionne).
J'ai donc testé le bon fonctionnement de la librairie avec ce code:

(function($){

    var $sitePusher = $('.site-pusher');
    $sitePusher.hammer()
    .on('swipeleft', function(e){
            console.log('hello');
    })

})(jQuery);

et ça fonctionne ! La console m'affiche bien "hello" quand je fais un swipe sur le div qui englobe tout le contenu de la page.

Mais lorsque je tente d'appliquer une transformation CSS à ce site pusher avec translateX... plus rien ne fonctionne. Aucun message de la console, mais aucun résultat après le swipe, rien ne se décale. Voilà mon code:

(function($){

    var $sitePusher = $('.site-pusher');
    $sitePusher.hammer()
    .on('swipeleft', function(e){
          $sitePusher.animate({translateX: '-250px'}, 250);
    })

})(jQuery);

Je repète: mon menu se trouve à droite de mon site, ce qui explique pourquoi je décide de décaler mon site de -250px, pour qu'il se déplace à gauche et non pas à droite.

Pourquoi ce code ne fonctionne pas? Faut-il appliquer la transformation autre part?
Je vous remercie, très bon week end à tous !

Underscreen

bonjour,

A en juger ce que tu dit, je dirais que le soucis ne viens pas du js mais du css.
translatex c'est pas une propriété css mais une valeur
tu devrais voir la propriété transform en css.
un exemple ici

Kenway

Auteur

Bonjour Underscreen :)
Merci de ta réponse. Cependant, le code est identique à celui du tuto de Grafikart, et fonctionne très bien dans le tuto. J'ai seulement modifier le nom de la variable et le div que je cible.
Je ne comprends pas quand tu dis "translateX n'est pas une propriété css mais une valeur" => je n'ai pas le choix d'utiliser cette valeur si je veux déplacer mon élément, de plus le lien montre bien que c'est translateX = une valeur en pixel qui fait bouger le div...

Spiker

Bonjour,

Juste par curiosité, ce ne serait pas plutôt:

$sitePusher.animate({transform: 'translateX(-250px)'}, 250);

Comme la dit Underscreen, translateX n'est pas une propriété mais une valeur de la propriété "transform"

Kenway

Auteur

Bonsoir Spiker !
Merci, j'ai compris cette fois ! :) Mais ce code ne fonctionne toujours pas :(

Kenway

Auteur

Finalement, ça marche avec ce code ci:

    (function($){

        var $sitePusher = $('.site-pusher');
        var sidebar = 0;

        $sitePusher.hammer()
        .on('swipeleft', function(e){
            if(sidebar){
                return true; //si le menu est visible, on n'écoute plus les mouvements
            }
            $sitePusher.animate({transform: "translateX: -250px"}, 100);
            sidebar = 1; //le menu est visible
        })

        .on('swiperight', function(e){
            if(!sidebar){
                return false; 
            }
            $sitePusher.animate({transform: "translateX: 0px"}, 100);
            sidebar = 0;
        })

    })(jQuery);
}

Je suis donc allé un peu plus loin dans le tuto et j'ai tenté de gérer le drag ... mais bien sûr, ça ne va pas comme je veux...

        .on('drag', function(e){
             if(e.gesture.direction == "right" && !sidebar){
                $sitePusher.animate({transform: "translateX:" + e.gesture.deltaX + "px"}, 0);
            }
        })

J'ai bien suivi le tuto, mais selon la console (après un console.log(e);), il n'y a aucune propriété gesture !!! (j'ai vraiment tout vérifié, et même avec des console.log(e.gesture); il n'y a rien !!!) Je ne sais vraiment plus comment faire... Le problème viendrait des librairies qui ont été mises à jour depuis? J'ai pu récupérer la librairie de jQuery.hammer.js à la version du tuto, et j'ai même téléchargé Zepto ! Mais ça ne marche toujours pas (malgré l'apparition de la propriété gesture cette fois ci...)
Que me conseillez vous?
Merci

[TUTO HAMMER.JS] Swipe avec Hammer.js

5 réponses