Supprimer JQuery en responsive design. Fermé

Question

Bonjour à tous.

J'ai beau chercher sur le net, je trouve personne qui parle de cela, pourtant dieu sait que les articles sur le responsive webdesign sont nombreux, j'ai l'impression d'être le seul à me poser cette question.

Voilà mon problème : 

J'utilise beaucoup JQuery pour des animations de bouton en rollover / rollout. Sur un ordinateur on fait glisser la souris, et on voit les animations.

Sur un smartphone, ou une tablette, l'expérience utilisateur n'est pas la même. On ne fait que cliquer, tout effet de rollover ou :hover en CSS ne sert à rien. Pire, ça complique la navigation.

On clique une première fois, l'animation se lance, et on doit recliquer pour lancer le lien vers une autre page.

Bref, peut importe le problème, je voudrais trouver un moyen de supprimer ou inhiber l'action du JQuery lorsque l'on est sur un smartphone ou une tablette (ou en fonction de la résolution) comme on enlèverait le :hover en CSS.

Merci beaucoup, je suis sûr que c'est une ou deux ligne de code toute bête.

aramir · Answer

Bon je suis vraiment pas de web design. Mais tu devrais pouvoir détecter à l'aide du user agent du client si celui ci tourne sur un navigateur mobile. Et à partir de là, initiatliser une variable en début de page (genre mobileDetected) et rajouter des if en fonction de cette variable pour savoir si jQuery doit lancer ses actions/animations/etc ou pas.
Je te passe ce lien, ca devrait t'aider.
https://stackoverflow.com/questions/6081346/how-to-detect-mobile-device-and-get-user-agent-info-send-and-save-that-informati
 
Bonne chance

Utilisateur anonyme · Answer

Hello, en Jquery tu as la possibilité d'ajouter et d'enlever les événements à ta guise

jQuery.on(); // Ajouter un événement
jQuery.off(); // Enlève le dit événement
// jQuery.click étant une substitution à jQuery.on('click',function);

On pourrait donc imaginer de faire un check à chaque fois que la largeur de l'écran change et faire une plage au niveau de la largeur.
 - si with entre 0 et 400 : 
  - désactiver toutes les variables et activer ceux-là
 - si with entre 401 et 800 :
  - désactiver toutes les variables et activer celle-ci
 - si with entre 801 et plus :
  - activer toutes les variables.

Après je ne pourrais te dire si c'est la méthode, mais théoriquement c'est une méthode.

Je te renvoie sur la doc officiel de jQuery pour le off et le on :
 - https://api.jquery.com/off/
 - https://api.jquery.com/on/

Et j'invite tous les autres CCMien à pofiner la méthode ci-dessus ou a présenter la votre ^^'

A+

Seezer

kiyomasa · Answer

Merci pour les 2 solutions.

je vais faire prochainement un test et je reviendrais pour dire comment j'ai résolue cela.