11489 sujets

JavaScript, DOM et API Web HTML5

Navigation au clavier et incompatibilité [update]

Bonjour à tous,

J'ai plutôt un profil de webdesigner et je rame avec jQuery.

J'ai intégré une navigation au clavier sur mon site. Lorsque le visiteur appuie sur la touche "haut" ou "bas" de son clavier la page scroll automatiquement sur un contenu.

Le souci est que ce code n'est pas compatible avec un système de panneau latéral que j'ai implanté.

Rendez vous sur : http://pepitodanger.free.fr/Maquette/index_disable.html

Appuyez sur les flèches haut et bas de votre clavier.
La page se déplace de contenu en contenu, le panneau latéral est désactivé.

Maintenant rendez vous sur : http://pepitodanger.free.fr/Maquette/

Cliquez sur "DIV HOME BY DEFAULT".
Le panneau à gauche fonctionne mais les flèches haut et bas du clavier ne fonctionnent plus.

En cause le fichier "snap.css".

Comment résoudre ce problème ?

Merci d'avance

PS : si vous connaissez d'autres scripts de side panel compatible touch device qui serait plus apte à être compatible je suis preneur.
Modifié par draklane (19 Mar 2014 - 12:54)
Bonjour,

Avant même de vous posez des questions sur la navigation de votre deuxième page, sachez qu'il y a des problèmes sur la première page donnée en lien :

La page se "bloque" si l'on va "trop loin" : si l'on continue d'appuyer sur la flèche haut ou bas alors qu'on est déjà censé être arrivé au bout des limites imposées.

Impossible de scroller (ou de naviger par clavier) par la suite sur la page, il faut attendre que le script "perde la main" avant de pouvoir scroller à nouveau...

L'expérience n'est pas très agréable pour l'utilisateur.
Bonjour,

Je te remercie pour ce retour utilisateur.

Du coup j'ai changé de script. Mais le problème avec le panneau latéral est toujours présent Smiley decu
Bonsoir draklane,

Il semblerait que le déplacement JS ne soit pas appliqué sur le bon conteneur :

1 - Dans le cas de la première page d'exemple, le scroll vertical présent est celui du document global.

2 - Mais dans le cas de la deuxième page d'exemple, un scroll est présent avant ouverture du panneau latéral. Ce n'est plus celui du document, mais c'est le scroll vertical de la div .snap-content. Le déplacement vertical ne serait plus à appliquer sur le document global, mais plutôt sur la balise div .snap-content :
<div id="page" class="snap-content" style="-webkit-transform: translate3d(300px, 0px, 0px);">
...
</div>
... or le plugin scrollit.js de votre site applique l'animation sur les balises html et body :
...
$('html,body').animate({
    scrollTop: targetTop,
    easing: settings.easing
}, settings.scrollTime);
...
... il faudrait adapter le plugin à votre structure HTML spécifique. Exemple à confirmer :
...
$('#page').animate({
    scrollTop: targetTop,
    easing: settings.easing
}, settings.scrollTime);
...

Espérant que ce début de solution réponde à votre attente.
Bonne soirée et bon code...
Hello Guiwint !

C'est même pas un début de solution, c'est LA solution ! Je te remercie ! Je n'ai même pas eu la présence d'esprit d'aller jeter un coup d’œil au JS de ScrollIt !

Merci encore !

UPDATE : J'ai parlé trop vite, ça scroll, mais qu'une fois au lieu de 3... bizarre
http://pepitodanger.free.fr/scrollit/
Modifié par draklane (25 Mar 2014 - 14:02)
Sujet clos
Aller à