Sujet Précédent Sujet Suivant

Supprimer JQuery en responsive design.

Fermé
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 - 20 déc. 2013 à 15:23
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 - 20 déc. 2013 à 19:33
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.
A voir également:

3 réponses

Réponse 1 / 3
Utilisateur anonyme
20 déc. 2013 à 16:57
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
1
Réponse 2 / 3
aramir Messages postés 939 Date d'inscription mardi 26 février 2008 Statut Membre Dernière intervention 26 décembre 2016 222
20 déc. 2013 à 16:30
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
0
Réponse 3 / 3
kiyomasa Messages postés 312 Date d'inscription mercredi 23 septembre 2009 Statut Membre Dernière intervention 12 mai 2016 5
20 déc. 2013 à 19:33
Merci pour les 2 solutions.

je vais faire prochainement un test et je reviendrais pour dire comment j'ai résolue cela.
0