Discussion :

[Nuage29]

Bonjour !

Je tente d'utiliser le swipe left pour décaler mon menu (grâce à Hammer.js).
J'ai bien déclaré le fichier JS où se trouve la librairie Hammer.JS (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:

Code :

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

1
2
3
4
5
6
7
8
9
(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:

Code :

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

1
2
3
4
5
6
7
8
9
(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 !

Edit: j'ai aussi essayé ce code:

Code :

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

1
2
3
4
5
6
7
8
9
(function($){
 
    var $sitePusher = $('.site-pusher');
    $sitePusher.hammer()
    .on('swipeleft', function(e){
         $sitePusher.animate({transform: 'translateX(-250px)'}, 250);
    })
 
})(jQuery);

étant donné que translateX n'est qu'une valeur de transform et non pas une propriété, j'ai rajouté le "transform", mais rien ne change.

[SylvainPV]

Bonjour,

As-tu essayé d'appliquer toi-même la transformation CSS directement sur l'élément, pour vérifier que ce n'est pas un problème CSS ?

[Nuage29]

Bonjour,

Oui, je viens juste de le faire, et l'ensemble de la page se décale bien vers la gauche (pour un transform: translateX(-250px); sur le site-pusher) et laisse apparaître le menu, comme souhaité. Je ne vois vraiment pas ce qui ne fonctionne pas dans le code jQuery...

Edit: après un petit console.log('ok'); juste avant le $sitePusher.animate({transform: translateX('-250px')}, 250); et quand je fais un swipe, rien ne se passe et ça n'affiche même pas ok.

Reedit: de plus en plus étrange... rien ne s'affiche sur la console de firefox, et après une vingtaine de swipe sur IE (on va dire que 1 swipe sur 6 fonctionne...), la console m'informe que "translateX" est indéfini... et plus particulièrement "jk"
Voilà une petite capture :


En fait il suffisait de mettre les parenthèses autour de la valeur translateX... c'est réglé. Par contre le swipe ne produit toujours rien et marche une fois sur 6 (testé sur mobile, il n 'y a rien non plus)

[headmax]

D'après ton erreur ton object animate ne dispose pas de la propriété que je veux utiliser, essaye de vérifier si tu as bien ta lib js qui se charge jquery.transform.js.

http://github.com/louisremi/jquery.transform.js

Code :

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

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

[SylvainPV]

Dans ton code il manque les guillemets autour de translateX, du coup JS essaie de l'interpréter comme une fonction.

[Nuage29]

Sylvain, pour la capture oui mais j'ai rectifié comme je l'ai dit mais ça ne marchait pas.

Mais headmax a trouvé la solution !! J'ai ajouté le transform à ma librairie Hammer et le swipe left marche nickel ! Merci énormément !!