ouverture panneau latéral avec la touche "entrée"
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
ouverture panneau latéral avec la touche "entrée"
Détails techniques
Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forum-test-phpbb2.forumactif.org/
Description du problème
Bonjour,Je travaille sur la navigation au clavier, notamment avec la touche tabulation, sur mes forums, et si j'arrive à ajouter les liens à la tabulation, modifier l'ordre, etc, je ne sais pas comment faire pour faire en sorte que tout ce qui fonctionne "onclick" fonctionne également avec la touche "entrée" ?
Plus simplement, j'ai ajouté le panneau coulissant à mon forum test, ajouté tabindex="1" dans la balise de l'image pour pouvoir "focuser" dessus, comment faire pour ouvrir (et fermer) la cb grâce à la touche "entrée" une fois qu'on est en focus dessus, de la même façon qu'en cliquant dessus ?
Le code du panneau activé sur toutes les pages (le même que dans le tutoriel, à tabindex près) :
- Code:
jQuery(document).ready(function () {
jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});
Dernière édition par MlleAlys le Dim 8 Mar 2015 - 22:19, édité 1 fois
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: ouverture panneau latéral avec la touche "entrée"
Re MlleAlys !
Si on ajoute ce code :
On prend chaque image ayant l'attribut tabindex, si l'une d'entre elle est focused et qu'on presse la touche enter on déclenche l'attribut onclick de celle-ci !
Si on ajoute ce code :
- Code:
$(function(){
$('img[tabindex]').on('focus', function(){
$(this).on('keypress', function(e){
if(e.which == 13){ $(this).trigger('click') }
});
});
});
On prend chaque image ayant l'attribut tabindex, si l'une d'entre elle est focused et qu'on presse la touche enter on déclenche l'attribut onclick de celle-ci !
Re: ouverture panneau latéral avec la touche "entrée"
Re SeLfde4Th7 ! o/
Si je retire juste le img comme ça :
est ce que ça fonctionnera pour n'importe quel élément et pas seulement les images ? =3
Edit : ça fonctionne super au début, mais si je "fais le tour" de la page avec la touche tabulation jusqu'à revenir sur l'image de la cb, là ça ne fonctionne plus... ^^"
Si je retire juste le img comme ça :
- Code:
$(function(){
$('[tabindex]').on('focus', function(){
$(this).on('keypress', function(e){
if(e.which == 13){ $(this).trigger('click') }
});
});
});
est ce que ça fonctionnera pour n'importe quel élément et pas seulement les images ? =3
Edit : ça fonctionne super au début, mais si je "fais le tour" de la page avec la touche tabulation jusqu'à revenir sur l'image de la cb, là ça ne fonctionne plus... ^^"
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: ouverture panneau latéral avec la touche "entrée"
Le mieux serait peut-être de mettre une class à chaque élément puis de sélectionner via la class les éléments :
Ainsi peut importe l'élément que c'est !
Le code de la CB serait alors :
- Code:
$(function(){
$('.tIndex').on('focus', function(){
$(this).on('keypress', function(e){
if(e.which == 13){ $(this).trigger('click') }
});
});
});
Ainsi peut importe l'élément que c'est !
Le code de la CB serait alors :
- Code:
jQuery(document).ready(function () {
jQuery('body').append('<table class="tIndex" style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});
Re: ouverture panneau latéral avec la touche "entrée"
il me semple que la class doit se mettre sur l'image et pas sur la table ^^"
Mais j'ai toujours le même problème : au premier passage ça fonctionne, mais si je passe par tous les liens de la page pour revenir au début, ça ne fonctionne plus =/
- Code:
jQuery(document).ready(function () {
jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" class="tIndex" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});
Mais j'ai toujours le même problème : au premier passage ça fonctionne, mais si je passe par tous les liens de la page pour revenir au début, ça ne fonctionne plus =/
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: ouverture panneau latéral avec la touche "entrée"
Je reproduis sur ton forum où le code fonctionne une fois sur deux.
Mais sur le miens cela fonctionne très bien, tu as placé les codes comment ?
Mais sur le miens cela fonctionne très bien, tu as placé les codes comment ?
Re: ouverture panneau latéral avec la touche "entrée"
dans modules > javascript, j'ai :
- celui de la chatbox du message au dessus, sur toutes les pages,
- celui pour le focus sur toutes les pages aussi,
- et celui pour les onglets des catégories pour lequel j'ai tout décoché (mais sans supprimer pour ne pas le perdre ^^")
- et j'ai forcé les templates par défaut aussi du coup
mais le problème reste, sur chrome comme sur firefox
- celui de la chatbox du message au dessus, sur toutes les pages,
- celui pour le focus sur toutes les pages aussi,
- et celui pour les onglets des catégories pour lequel j'ai tout décoché (mais sans supprimer pour ne pas le perdre ^^")
- et j'ai forcé les templates par défaut aussi du coup
mais le problème reste, sur chrome comme sur firefox
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Re: ouverture panneau latéral avec la touche "entrée"
Essai voir si ça s'arrange avec ce code (mais j'y crois peu) :
- Code:
$(function(){
$('.tIndex').on('keyup', function(e){
if(e.which == 13) $(this).trigger('click');
});
});
Re: ouverture panneau latéral avec la touche "entrée"
ça fonctionne !!!! 8D
merci beaucoup !!! o/ Comme quoi, faut croire plus ! xD
je passe le sujet en résolu, :thanks:
merci beaucoup !!! o/ Comme quoi, faut croire plus ! xD
je passe le sujet en résolu, :thanks:
MlleAlys- Membre actif
- Messages : 5800
Inscrit(e) le : 12/09/2012
Sujets similaires
» Pbl avec panneau latéral
» Problème avec le panneau latéral coulissant
» Panneau latéral
» panneau lateral coulissant avec menu vertical
» Problème de code avec le panneau lateral coulissant
» Problème avec le panneau latéral coulissant
» Panneau latéral
» panneau lateral coulissant avec menu vertical
» Problème de code avec le panneau lateral coulissant
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum