Se déplacer entre les pages d'un site au clavier plutôt qu'à la souris

Le
Eric Demeester
Bonjour,

Je précise un peu. Soit un site présentant un didacticiel sous forme
d'une succession de pages HTML ordonnées, chaque page étant munie d'un
bouton « Précédent » et « Suivant » pour se déplacer, plus d'un champ de
formulaire permettant d'aller directement à une page, exemple concret
ici : http://www.pescadoo.net/present/virtualbox/

Plutôt que de cliquer sur les flèches, ce qui peut en plus obliger à
faire défiler la page verticalement en fonction de la taille de la
fenêtre d'affichage, j'aimerais que la touche :

- « Flèche vers la droite » me permette d'aller à la page suivante ;
- « Fléche vers la gauche » de revenir à la page précédente.

Si l'appui sur « Début » revenait page 1 et « Fin » affichait la
dernière page, ce serait encore mieux.

Je sais que c'est possible en javascript, je pense même avoir mis la
main sur le morceau de Jquery qui sait faire, on voit ça souvent pour
faire défiler les photos s'une galerie, mais en HTML5 / CSS, c'est
jouable ? Et dans l'affirmative, comment faire ?

Ça fait un moment que je cherche sans trouver grand-chose, mais je me
dis que peut-être ici, avec SAM qui veille

Par avance merci pour vos idées.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
christian
Le #26367183
Le Mon, 14 Sep 2015 18:02:26 +0200, Eric Demeester a écrit :

Bonjour,

Je précise un peu. Soit un site présentant un didacticiel sous forme
d'une succession de pages HTML ordonnées, chaque page étant munie d'un
bouton « Précédent » et « Suivant » pour se déplacer, plus d'un champ de
formulaire permettant d'aller directement à une page, exemple concret
ici : http://www.pescadoo.net/present/virtualbox/

Plutôt que de cliquer sur les flèches, ce qui peut en plus obliger à
faire défiler la page verticalement en fonction de la taille de la
fenêtre d'affichage, j'aimerais que la touche :

- « Flèche vers la droite » me permette d'aller à la page suivante ;
- « Fléche vers la gauche » de revenir à la page précédente.

Si l'appui sur « Début » revenait page 1 et « Fin » affichait la
dernière page, ce serait encore mieux.

Je sais que c'est possible en javascript, je pense même avoir mis la
main sur le morceau de Jquery qui sait faire, on voit ça souvent pour
faire défiler les photos s'une galerie, mais en HTML5 / CSS, c'est
jouable ? Et dans l'affirmative, comment faire ?

Ça fait un moment que je cherche sans trouver grand-chose, mais je me
dis que peut-être ici, avec SAM qui veille...

Par avance merci pour vos idées.



bonjour,

tu as pensé aux accesskey ?


--
Christian
Eric Demeester
Le #26367253
Bonsoir,

christian (14 Sep 2015 16:10:45 GMT -
fr.comp.infosystemes.www.auteurs) :

Le Mon, 14 Sep 2015 18:02:26 +0200, Eric Demeester a écrit :

> - « Flèche vers la droite » me permette d'aller à la page suivante ;
> - « Fléche vers la gauche » de revenir à la page précédente.

tu as pensé aux accesskey ?



Je n'y avais pas pensé car je ne connaissais pas, merci de m'avoir
signalé leur existence.

Sur le papier, ça semble faire pile-poil ce que je souhaite.

Ceci dit, en lançant une recherche sur « HTML accesskey », la majorité
des liens souligne les limites et des défauts du système, l'absence de
standardisation entre navigateurs, les interférences avec les
raccourcis-clavier du navigateur ou du système d'exploitation :

http://www.alsacreations.com/article/lire/568-Accesskey-le-grand-echec-de-l-accessibilite-du-Web.html
http://www.w3schools.com/tags/att_global_accesskey.asp
http://reference.sitepoint.com/html/a/accesskey

On est loin de l'appui sur une simple touche pour obtenir le résultat
escompté.

Je vais faire quelques tests, mais je sens que tout ça va finir en appel
aux fonction Jquery qui vont bien, et tant pis pour mon envie de me
passer de javascript.
Otomatic
Le #26367299
Eric Demeester
Je vais faire quelques tests, mais je sens que tout ça va finir en appel
aux fonction Jquery qui vont bien, et tant pis pour mon envie de me
passer de javascript.


Il n'y a pas besoin de Jquery.
Pour tout mon site, les liens Précédent et Suivant ont respectivement
pour id lien_prec et lien_suiv

<script type='text/javascript'>
document.onkeydown = function(event) {
var KEYCODE_LEFTARROW = 37;
var KEYCODE_RIGHTARROW = 39;
event = event || window.event;
var keycode = event.keyCode || event.which;
var key = String.fromCharCode(keycode).toLowerCase();
if (key === 'p' || keycode === KEYCODE_LEFTARROW) {
document.getElementById('lien_prec').click();
}
else if (key === 'n' || key === 's' || keycode === KEYCODE_RIGHTARROW)
{
document.getElementById('lien_suiv').click();
}
};
</script>
--
Envoyé depuis mon Apple ][ Europlus et
Carte Appletell en 1200/75 bauds réversible.
Eric Demeester
Le #26367382
Bonjour,

Otomatic (Tue, 15 Sep 2015 10:01:49 +0200 -
fr.comp.infosystemes.www.auteurs) :

Il n'y a pas besoin de Jquery.
Pour tout mon site, les liens Précédent et Suivant ont respectivement
pour id lien_prec et lien_suiv



Mille mercis pour ce morceau de code sobre et efficace !
Eric Demeester
Le #26367502
Eric Demeester (Tue, 15 Sep 2015 14:58:31 +0200 -
fr.comp.infosystemes.www.auteurs) :

Mille mercis pour ce morceau de code sobre et efficace !



Après quelques retouches, ton script fonctionne parfaitement [*] :
http://www.pescadoo.net/present/virtualbox/

et la navigation est du coup bien plus agréable qu'à la souris.

Merci encore.

[*] Je me suis fait peur car ça ne fonctionnait pas sous Firefox, mais
les choses sont rentrées dans l'ordre quand j'ai eu la présence
d'esprit d'expliquer à Noscript qu'il fallait faire une exception
et autoriser javascript pour ce nom de domaine.
(La vieillesse est un naufrage ©)
SAM
Le #26368148
Le 15/09/15 23:29, Eric Demeester a écrit :
Eric Demeester (Tue, 15 Sep 2015 14:58:31 +0200 -
fr.comp.infosystemes.www.auteurs) :

Mille mercis pour ce morceau de code sobre et efficace !






Après quelques retouches, ton script fonctionne parfaitement [*] :
http://www.pescadoo.net/present/virtualbox/

et la navigation est du coup bien plus agréable qu'à la souris.



Ouf !
les combinaisons [Comand][->] et [Comand][<-]
fonctionnent encore dans mon Firefox ;-)

Tien ?
j'ai même celles [Control][<-]/[->] ainsi que [Alt][->]/[<-]
qui fonctionnent pareillement !! !!!
C'est nouveau ça.

Ne reste plus qu'à avoir les touches [fenetre precedente] [fenetre
suivante] qui fonctionnent aussi (codes 36 et 35)

Et tant qu'à y être la touche [tab] (code 9) ou la barre espace (32)
pour atteindre d'1 coup le champ de choix de pages ?
sauf à avoir un JS pour activer ce champ dès l'ouverture de la page?
window.onload = function(){document.forms[0].n.focus();};



Est-ce vraiment indispensable de faire recharger les images ?
(quand je reviens sur celles déjà vues, je trouve un peu agaçant de me
"re-taper" l'affichage progressif)

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Eric Demeester
Le #26368166
Bonjour Sam,

SAM (Sun, 20 Sep 2015 11:15:08 +0200
- fr.comp.infosystemes.www.auteurs) :




Fort intéressant, ma foi.

les combinaisons [Comand][->] et [Comand][<-]
fonctionnent encore dans mon Firefox ;-)



Sais-tu quel est l'équivalent de la touche <Command> avec un clavier
autre que Apple ?

Et tant qu'à y être la touche [tab] (code 9) ou la barre espace (32)
pour atteindre d'1 coup le champ de choix de pages ?



Pour les touches <Tab> et <Shift><Tab>, je pense qu'elles permettent se
déplacer dans les champs d'un formulaire sans adjonction de js ?

sauf à avoir un JS pour activer ce champ dès l'ouverture de la page?
window.onload = function(){document.forms[0].n.focus();};



On dirait que pas toujous, donc :)

Est-ce vraiment indispensable de faire recharger les images ?



Comment éviter cela ?

(quand je reviens sur celles déjà vues, je trouve un peu agaçant de me
"re-taper" l'affichage progressif)



J'avais omis de préciser que je ne suis pas le créateur de ces pages, je
vais transmettre l'ensemble de tes remarques et suggestions à qui de
droit.

Merci pour toutes ces informations.
SAM
Le #26368244
Le 20/09/15 13:29, Eric Demeester a écrit :
Bonjour Sam,



Hello,

les combinaisons [Comand][->] et [Comand][<-]
fonctionnent encore dans mon Firefox ;-)



Sais-tu quel est l'équivalent de la touche <Command> avec un clavier
autre que Apple ?



de ce que je crois en savoir, sur les autres systèmes (Windows, Linux)
quand c'est prévu, c'est transposé avec [Control]

Si la question est : comment avoir un clavier "Mac" sur un clavier
lambda de PC ... il existe des mappages (au moins un - que j'utilise sur
mon NetBook - dont il faudrait que je voie. Ha! de mémoire il me semble
on s'y sert du Alt-Gr - que je me suis empressé de squizer/associer au
Alt "normal" vu que je ne me sers jamais du Alt de droite)

Et tant qu'à y être la touche [tab] (code 9) ou la barre espace (32)
pour atteindre d'1 coup le champ de choix de pages ?



Pour les touches <Tab> et <Shift><Tab>, je pense qu'elles permettent se
déplacer dans les champs d'un formulaire sans adjonction de js ?



Vi mais ... c'est chiant, on n'arrive pas sur le champ au 1er Tab
Et ... si on se tape une navigation par JS pourquoi ne pas aussi
faciliter l'accès au choix de page par ce moyen ?

Est-ce vraiment indispensable de faire recharger les images ?



Comment éviter cela ?



que l'on donc cesse de me balancer un chiffre aléatoire après le nom de
la photo !!!
là : -->------>------>----^^^^^^^^

J'avais omis de préciser que je ne suis pas le créateur de ces pages, je
vais transmettre l'ensemble de tes remarques et suggestions à qui de
droit.



Si l'ajout aléatoire est pour éviter qu'on puisse copier trop facilement
les vues c'est raté !
On n'y gagne que d'encombrer avec de multiples doublons les caches des
navigateurs en visite.
Si c'est pour s'assurer que le visiteur accède à la dernière mise à jour
de la photo ... je ne comprends pas trop : elles sont susceptibles de
changer souvent ? (< 24 heures ?)




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26368245
Le 21/09/15 03:26, SAM a écrit :

Ha! de mémoire il me semble
on s'y sert du Alt-Gr - que je me suis empressé de(blabla)



Ooops !! j'ai focalisé sur [Option] débaptisé [Alt] sur claviers Mac
et qui sert énormément en particulier pour accéder à tous les caractères
cachés

Donc
Alt de Mac ≈ Alt de PC Win
Command Mac = Control PC



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Publicité
Poster une réponse
Anonyme