11548 sujets

JavaScript, DOM et API Web HTML5

Lier les touches clavier à la navigation du site

Pages :
Salut à toutes et tous Smiley smile

alors ! j'ai mon html comme suit :

<div id="pad">
	<div id="pad_up">
                 <a href="#top"> UP </a></div>
	<div id="pad_down">
                 <a href="#bottom"> DOWN </a></div>
	<div id="pad_prev">
                 <a href="#prev"> PREVIOUS </a></div>
	<div id="pad_next">
                 <a href="#next"> NEXT </a></div>
</div>


un script comme suit : 

$('body').on('keypress',function(e){
	var code = e.keyCode ? e.keyCode : e.charCode;
		switch (code) 
		{
			//PREV
			case 37: $('#pad_prev').trigger('click');
			break;
			//UP
			case 38: $('#pad_up').trigger('click');
			break;
			//NEXT
			case 39: $('#pad_next').trigger('click');
			break;
			//DOWN
			case 40: $('#pad_down').trigger('click');
			break;
		
		}

});


Mais ça veut rien savoir.
Quelqu'un aurait une idée du pourquoi ça veut pas ?

l'idée est de transposer au clavier la naviguation que l'on a avec le pad multidirectionnel en bas à droite de mon site.

Merci Smiley ravi
Modifié par Pooley (05 Mar 2012 - 16:46)
Personne pour m'aider ou me mettre sur la piste ? voici la page online si ça peut aider.
Modifié par Pooley (02 Mar 2012 - 23:58)
Bon il ne me reste plus qu'à m'ouvrir les veines avec une feuille de papier.
Modifié par Pooley (02 Mar 2012 - 23:58)
Plutot que de déclencher l'envoie d'un event.
Si tu appel une fonction directement que ce passe t'il.


petits correction :
créer une fonction de redirection sur l'ancre.
De plus tu éxècute l'event click sur les div et non les liens.

J'ai trouver se lien sur google peut etre qu'il peut t'interresser :
http://www.openjs.com/scripts/events/keyboard_shortcuts/

Voila en esperant que cela t'aide. Smiley biggrin
Modifié par gtko (03 Mar 2012 - 01:54)
Merci beaucoup pour ton aide et tes conseils Gtko.
Je regarde ton lien de suite.
Pour info, j'ai essayé ça :


$('body').on('keypress',function(e){
	var code = e.keyCode ? e.keyCode : e.charCode;
		switch (code) 
		{
		
			case 37: $('#pad_prev a').click();
			break;
			
			case 38: $('#pad_up a').click();
			break;
			
			case 39: $('#pad_next a').click();
			break;
			
			case 40: $('#pad_down a').click();
			break;
		
		}

});

Je sélectionne bien les <a> des divs respectives et j'ai mis la fonction .click(); mais ça ne donne rien.
Modifié par Pooley (03 Mar 2012 - 11:53)
J'ai aussi essayé ça :

$('body').on('keypress',function(e){
var code = e.keyCode ? e.keyCode : e.charCode;
switch (code) 
{
case 37: $(location).attr('href','#prev');
break;
case 38: $(location).attr('href','#top');
break;
case 39: $(location).attr('href','#next');
break;
case 40: $(location).attr('href','#bottom');
break;
}
});


Mais sans succès.
Modifié par Pooley (03 Mar 2012 - 11:53)
Bon maintenant ça clic pas, mais ça clignote au keydown et la barre d'adresse nous montre qu'on cogne à la bonne porte (avec l'affichage des #...).
Bonjour,

Quel est le comportement que tu essais d'obtenir en lançant un click() sur un élément ?

En lançant cet événement, tu n'imitera pas le vrai clic d'une souris sur un lien (donc suivre l'url). Tu exécuteras seulement ce que tu auras lié au clic via JS. Par exemple, essaie ceci avec ton code:


$('#pad_prev a').click(function () {
	alert('ok, ça marche');
});

$(document).on('keypress',function(e){ // préfère lié ton évènement à document dans ce cas ci
	var code = e.keyCode ? e.keyCode : e.charCode;
		switch (code) 
		{
			case 37:
				$('#pad_prev a').click();
				break;
			case 38:
				$('#pad_up a').click();
				break;
			case 39:
				$('#pad_next a').click();
				break;
			case 40:
				$('#pad_down a').click();
				break;
		}
});


Ça ne fonctionnera actuellement qu'avec la touche code 37, suffira de définir les autres si besoin.
Modifié par Vaxilart (04 Mar 2012 - 06:06)
Sur le Portfolio, il y a une fonction BlinkPad qui me donne la preuve que le "bind" des touches claviers fonctionne car le pad "s'allume" en fonction de la flèche pressée (La barre d'adresse en témoigne aussi son état change lorsque les touches sont utilisées). Je vais tester en mettant une alerte comme tu le préconises.

Actuellement j'ai ce script :


$(window).keydown(function(e){

	var code = e.keyCode ? e.keyCode : e.charCode;

	switch (code) 
	{

		case 37: $(location).attr('href','#prev');
		BlinkPad('prev');
		break;

		case 38: $(location).attr('href','#top');
		BlinkPad('up');		
		break;
									   
		case 39: $(location).attr('href','#next');
		BlinkPad('next');		
		break;
							   
		case 40: $(location).attr('href','#bottom');	
		BlinkPad('down');	
		break;

	}

});

Il est semi-fonctionnel, les touches sont prises en comptes, mais l'action derrière ne l'est pas.
Modifié par Pooley (05 Mar 2012 - 15:28)
Dans l'idée je souhaite qu'en utilisant les touches du clavier on ait les mêmes comportements qu'avec un clic à la souris sur les boutons du pad.
Modifié par Pooley (05 Mar 2012 - 23:19)
Mais ton comportement au clic est-il entièrement géré par javascript ? (sans CSS, et sans comportement par défaut du navigateur)
Le Prev/next est géré par bxSlider.js (carrousel) et le top/bottom (scroll) est géré par le SmoothScroll.js
Modifié par Pooley (05 Mar 2012 - 23:37)
Hum, eh bien, dans ce cas le mieux serait peut-être de vérifier du côté de ces plugins et de la manière dont leurs events handler sont liés...

Sinon, tu peux aussi regarder s'ils ont une API à travers laquelle tu peux commander certaines actions à ces éléments.
je regarderai dans bxSlider, il me semble y avoir vu un GoToPrevSlider(); / GoToNextSlider(); ... à voir.
en ce qui concerne smoothscroll (l'effet se fait seulement au clic, aucun effet par de défilement par le clavier, juste un passage direct d'une ancre à l'autre...) La cohabitations des js ... !
Modifié par Pooley (06 Mar 2012 - 01:56)
Salut.

Je viens de faire un test sur ton site, et si j'entre ça dans ma console JS (dans mon cas la console de firebug), tout baigne:


$("#pad_next").find('.bx-next').click();

// ou

$("#pad_down").find('a').click();


Es-tu certain d'avoir bien ciblé tes éléments ? J'ai remarqué qu'il y avait deux balises <a> au sein de chaque boutons du "pad"

(P.S.: Je viens de tester sous Chrome et c'est nickel aussi via la console)
Modifié par Vaxilart (06 Mar 2012 - 02:53)
Je pensais qu'ils l'étaient puisque les flèches "blinkaient" mais le .find();est peut-être salvateur ici pour le prev/next/ nickel, mais pour le top/bottom le script du smoothscroll s'emballe comme sur cette page. En tout cas je te remercie de m'avoir soumis ton code et pris ton temps Smiley smile
Modifié par Pooley (06 Mar 2012 - 03:32)
Le problème avec bas/haut, c'est que tu anime la position vertical du scroll et que le browser le fait aussi par défaut.

À ce niveau, j'aurais plutôt tendance à te conseiller de ne pas mettre d'effet custom sur les flèches bas/haut (bien que tu peux laisser les flèches du pad s'allumer pour donner l'impression). Mais si tu y tiens, tu devrais vérifier si tu as moyen d'annuler leur effet par défaut... Dans le style:


.click(function(e){
    e.preventDefault();
})


Mais je te le déconseille, et ne suis pas certain que ça fonctionne.
Pages :
Sujet clos
Aller à