JS – Navigation fléchée sur votre site
Après mon tuto “adapter son site au navigateur de l’utilisateur”, qui permet donc d’avoir un site plus ou moins original, je vais attaquer une autre facette de jQuery en matière de design et d’ergonomie. Une navigation fléchée toute bête qui reprendra ce que j’avais fait dans mon précédent tutoriel et qui s’adresse aux novices grâce à de nombreux exemples interactifs ;) Attention, long tuto !
Je vais décomposer ce tutoriel en 2 grandes parties, la première étant sur le principe de la navigation, le deuxième sur la réalisation de l’exemple proposé ci-dessus. Pour ce tutoriel, je vais utiliser JS Bin pour que vous puissiez tester et éditer le code que je vous propose comme bon vous semble. De ce fait, je vous déconseille d’utiliser IE (même le 8, et oui) car il y a certains bug (seulement avec JS Bin, le code marche comme il faut sinon).
1. Les bases de la navigation.
1.1 Par où commencer ?
Avant d’entrer dans le vif du sujet, il faut se poser cette question : par où commencer ? Donc avant de coder comme un foufou, il faut bien comprendre les bases. Faire un site qui repose seulement sur une navigation originale en javascript pose de gros problèmes d’accessibilité, un peu comme un site fait en flash. La meilleure des solutions est donc de faire une version “light”, sans fioritures pour ceux qui n’ont pas le JavaScript d’activé (ou qui ont IE6 §!). Un des problème est donc qu’il faut refaire son site (enfin une version simple c’est pas non plus très long à réaliser) et qu’il est impossible de rediriger l’utilisateur vers la version light côté serveur car le JavaScript est un langage qui s’exécute côté client.
Donc pour faire simple :
<span>Le Javascript est désactivé :(</span>
<script>
$("span").text("Oééééé §!"); //Remplace le texte du span si le javascript est activé.
</script>
Essayez en désactivant puis en activant le JavaScript. Bon ok, je vous vois venir là :
Mais la balise “noscript” elle est pas là pour ça ?!?
J’aurai aimé vous dire que oui, mais notre ami IE (encore lui dis donc, même le 8) ne cache pas cette balise si le javascript est activé. En fait il ne cache que le texte, mais si vous avez appliqué une bordure par exemple, vous aurez un joli trait (le contenu étant vide, ce sera les bordures). Merci IE :)
Bon, une fois cette étape passé, il faut penser aux façons de naviguer dans votre site. J’en ai choisis 3 pour l’exemple final. L’utilisation des flèches du clavier (gauche et droite), de G et D (Gauche et Droite) et de liens. Parmi ces 3 exemples, il n’y a que 2 cas d’utilisations, l’appuie sur une touche du clavier, et le clic sur un lien.
1.2 L’appuie sur une touche du clavier.
Nous allons prendre le sujet différemment, il ne sera pas question de navigation dans cette partie mais juste de compréhension.
Il y a deux méthodes pour nous permettre de savoir quand l’utilisateur tape sur son clavier : keydown() et keypress(). Ces méthodes semblent identiques, la petite différence est que si l’utilisateur appuie et reste appuyé sur une touche puis, d’un coup d’un seul, veut appuyer sur une autre touche, si il s’agit d’un caractère alphanumérique, keypress() et keydown() changeront de paramètre, alors que si il s’agit d’une autre touche (genre Ctrl, Alt ou Shift), keypress() arrêtera son exécution là ou keydown() continuera la sienne. Bref, j’utiliserai keydown() dans notre exemple (keypress() étant plus pour récupérer une chaine de caractère).
Si vous avez jeté un petit coup d’œil à la doc de jQuery, vous vous apercevrez qu’il n’est pas question de récupération des touches pressées, rien de grave je vais faire cet exemple pour vous :
<h1>Les touches pressées sont :</h1>
<ul>
</ul>
</script>
<script>
$(document).keydown(function(e){
$('ul').append('<li>' + e.keyCode + '</li>');
});
</script>
Je vous vois venir encore une fois :
C’est bidon ton truc, je vois juste des nombres lol.
C’est normal gros bêta, les nombres sont en fait un code qui représente la touche pressée, vous devez les apprendre par cœur ou bien vous devez savoir utiliser Google, au choix.
Bref, dans notre exemple, les touches qui nous intéressent sont les flèches gauche et droite ainsi que les lettres G et D, soit les numéros 37 et 39 ainsi que les numéros 71 et 68.
$(document).keydown(function(e){
// Flèche gauche : 37 ; g : 71
if (e.keyCode == 37 || e.keyCode == 71) {
alert("Vers la gauuuuuche !");
}
// Flèche droite : 39 ; d : 68
if (e.keyCode == 39 || e.keyCode == 68) {
alert("On va à droiiiiiite !");
}
});
Et voilà :D
1.3 Le clic sur un lien.
Cette partie est vraiment simple. Je pense que vous avez tous entendu parler de onClick() ? Même intégré directement dans le html quand c’est bien moche :) Et oui ça ne sera pas plus compliqué que ça :D
<span><a href="#">Kikoo</a></span>
</script>
<script>
(function($){
$('span').click(function(){
alert($(this).text());
});
})(jQuery);
</script>
Bien sur, il faudra ensuite adapter le code à la situation, ce que l’on va faire dans la suite ;)
2. Adapter son code à la navigation.
2.1 Adaptation du HTML au navigateur et présentation du plugin scrollTo.
Pour cet exemple, nous allons faire au plus simple, 2 divs et 2 liens :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Navigation fléchée - Par Calou pour http://www.nanane.fr/</title>
<link rel="stylesheet" type="text/css" href="http://francois.robichet.com/css/reset.css">
<style>
body
{
overflow: hidden;
}
h2
{
position: absolute;
font-size: 10em;
}
#gauche
{
float: left;
background: red;
}
#droite
{
clear: right;
float: right;
background: green;
}
</style>
</head>
<body>
<div id="gauche"><h2>lol<a href="#">-></a></h2></div>
<div id="droite"><h2><a href="#"><-</a>edr</h2></div>
</body>
</html>
Le CSS est mis sur la même page seulement pour l’exemple, il est bien entendu impératif de le mettre dans un fichier à part. Bref, le résultat est peu parlant sans le JavaScript, mais j’y viens.
Pour la suite, nous allons réutiliser ce que j’ai écrit dans mon ancien tutoriel “adapter son site au navigateur de l’utilisateur” pour avoir 2 parties distinctes :
// Initialise le site par rapport au navigateur
$(function(){
adjustSize();
// Fonction appelé lorsque le navigateur change de résolution
$(window).smartresize(function(){
adjustSize();
});
});
/* FONCTION QUI AJUSTE LE SITE AU NAVIGATEUR */
function adjustSize(){
// Initialisation des variables pour la taille de la fenêtre
var navWidth, navHeight;
navWidth = $(window).width();
navHeight = $(window).height();
// Mise-à-jour des divs principaux (avec la bonne taille tailles)
$("body").css({
"width": navWidth * 2
});
$("#gauche").css({
"width": navWidth,
"height": navHeight
});
$("#gauche h2").css({
"top": (navHeight - $("#gauche h2").height()) / 2,
"left": (navWidth - $("#gauche h2").width()) / 2
});
$("#droite").css({
"width": navWidth,
"height": navHeight
});
$("#droite h2").css({
"top": (navHeight - $("#droite h2").height()) / 2,
"left": navWidth + (navWidth - $("#droite h2").width()) / 2,
// Hack "J'emmerde IE je capte pas d'ou ça bug et il est 08h07 il serait temps de dormir" style.
"width": $("#droite h2").width() + 50
});
}
Normalement vous ne devez voir que la partie en rouge avec un bon gros “lol->”. Notre affichage est prêt, il ne reste plus qu’à faire la navigation !
Pour ce faire, nous allons utiliser le très simple mais très complet plugin jQuery.ScrollTo.
Voilà comment l’implémenter :
activeDiv = "#gauche";
$.scrollTo( $("#gauche") );
Et c’est tout ! La variable activeDiv est là car par défaut nous somme sur le div de gauche, elle changera en fonction de la div en cours.
Je vous vois venir encore une fois :
T’es bien mignon mais bon, je navigue toujours pas dans mon site moi !
J’aimerais tout d’abords vous remercier pour le compliment, mais ce n’est pas la première fois qu’on me dira que je suis mignon vil séducteur :) Vous êtes pressés ? Ça tombe bien, on attaque la suite.
2.2 Adapter la méthode keydown().
On reprend ce que l’on a fait plus haut et on l’adapte à la situation :
$(document).keydown(function(e){
// Flèche gauche : 37 ; g : 71
if (e.keyCode == 37 || e.keyCode == 71) {
if (activeDiv == "#droite") {
$.scrollTo($("#gauche"), 1200);
activeDiv = "#gauche";
}
}
// Flèche droite : 39 ; d : 68
if (e.keyCode == 39 || e.keyCode == 68) {
if (activeDiv == "#gauche") {
$.scrollTo($("#droite"), 1200););
activeDiv = "#droite";
}
}
});
Si vous avez compris ce que l’on a fait précédemment, cette partie ne devrait pas vous poser de réels problèmes. Bien, vous avez testé le rendu en appuyant bien sur les flèches ou sur G et D ? Et si on spam ces touches comme des foufous, qu’est-ce qui ce passe ?
WTF ?§!? Ça arrête pas de s’animer ya pas moyen d’arrêter cette merde ?
Bien sur que si jeune foufou :) On va faire une sorte de queue pour dire à notre script qu’il ne peut exécuter le scrolling que si il en a l’autorisation. Concrètement, on va créer une variable booléenne qui passera de true à false quand une animation sera en cours, puis elle repassera à true quand l’animation sera finie, et cela par le biais d’un callback (onAfter avec le plugin ScrollTo).
/*####################*/
/* NAVIGATION FLECHEE */
/*####################*/
// Initialisations importantes
var canScroll = true;
// Dès que l'utilisateur appuie sur une touche
$(document).keydown(function(e){
// Si la page à finir de scroller
if (canScroll) {
// Flèche gauche : 37 ; g : 71
if (e.keyCode == 37 || e.keyCode == 71) {
if (activeDiv == "#droite") {
canScroll = false;
$.scrollTo($("#gauche"), 1200, {
onAfter: function(){
canScroll = true
}
});
activeDiv = "#gauche";
}
}
// Flèche droite : 39 ; d : 68
if (e.keyCode == 39 || e.keyCode == 68) {
if (activeDiv == "#gauche") {
canScroll = false;
$.scrollTo($("#droite"), 1200, {
onAfter: function(){
canScroll = true
}
});
activeDiv = "#droite";
}
}
}
});
Tout fonctionne à merveille (normalement) ! Il ne reste que la partie avec les liens, de loin la plus simple ;)
2.3 Adapter la méthode click().
Comme pour le keydown(), on adapte ce que l’on a fait précédemment pour notre exemple :)
$("#gauche h2 a").click(function(){
if (activeDiv == "#gauche") {
canScroll = false;
$.scrollTo($("#droite"), 1200, {
onAfter: function(){
canScroll = true
}
});
activeDiv = "#droite";
}
});
$("#droite h2 a").click(function(){
if (activeDiv == "#droite") {
canScroll = false;
$.scrollTo($("#gauche"), 1200, {
onAfter: function(){
canScroll = true
}
});
activeDiv = "#gauche";
}
});
Il s’agit du même code que dans les sources, à une chose près ;D http://jsbin.com/emazi3/edit
Aucun piège ici, on récupère bien le nouveau div et on empêche toujours de faire scroller la page comme une fofolle :)
2.4 Fin.
Enfin on y arrive, après plus de 7 heures de suite ce tutoriel est finit. Vous pouvez aussi permettre à l’utilisateur de faire des combinaisons de touches (le Konami Code par exemple, tellement geek :D) etc…
J’ai essayé de rendre ce tutoriel plus interactif que le précédent, JS Bin vous permettant de modifier (et donc de tester) le code à votre guise.
Si vous avez des questions sur ce tutoriel ou bien des améliorations à proposer pour les prochains, n’hésitez pas à nous spammer :D
Ça pique un peu les yeux le rouge et le vert pétant :o
Mais ça reste tout de même un bon tuto :)
Va falloir sérieusement que je me penche un peu plus sur jQuery moi !
Bonjour,
Tout d’abord, félicitation pour ce super tuto! Ainsi que pour ce bon site que vous nous offrez-là!
J’aimerai pouvoir faire la même chose en rajoutant une 3ème page, mais je bloque un peu…
Serait-il possible de m’aiguiller un peu ? :)
Merci d’avance!!