Se déplacer entre les pages d'un site au clavier plutôt qu'à la souris
9 réponses
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...
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
christian
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
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...
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
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 :
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.
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 :
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.
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 :
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
Eric Demeester écrivait :
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 <eric.REMOVETHIS@mailody.org> écrivait :
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.
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.
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
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
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
Bonjour Sam,
SAM (Sun, 20 Sep 2015 11:15:08 +0200 - fr.comp.infosystemes.www.auteurs) :
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 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] <https://support.microsoft.com/fr-fr/kb/970299>
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) <http://www.florentpillet.com/> "French Mac keyboard"
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 !!! <img href="maPhoto.00x.jpg?1234567"> 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
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]
<https://support.microsoft.com/fr-fr/kb/970299>
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)
<http://www.florentpillet.com/> "French Mac keyboard"
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 !!!
<img href="maPhoto.00x.jpg?1234567">
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
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] <https://support.microsoft.com/fr-fr/kb/970299>
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) <http://www.florentpillet.com/> "French Mac keyboard"
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 !!! <img href="maPhoto.00x.jpg?1234567"> 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 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 <http://www.macpuissancedix.com/943.php>’’
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
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
<http://www.macpuissancedix.com/943.php>’’
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
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 <http://www.macpuissancedix.com/943.php>’’
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
