11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] JQuery OnePage : sélectionner une section 'en cours'

Bonjour,

Suite à la question d'un alsanaute à propos d'un site One Page je me suis pris au jeux dans la réponse en créant ma propre solution...

Maintenant j'aimerais améliorer ce script avec des commandes au clavier, notamment grâce aux flèches droite et gauche qui pourraient me servir à passer à la section précédente ou suivante de la page :
<html>
	<body>
		<section class="section"></section>
		<section class="section"></section>
		<section class="section"></section>
		<section class="section"></section>
		<section class="section"></section>
	</body>
</html>

$(document).keydown(function(e) {
	if (e.keyCode == 37) { // Arrow left
		$('html,body').animate({
			scrollTop: $('.section').prev().offset().top
		}, 400);
	}
	if (e.keyCode == 39) { // Arrow right
		$('html,body').animate({
			scrollTop: $('.section').next().offset().top
		}, 400);
	}
});

Bien entendu, le code jQuery posté ici ne marche qu'en relation avec la section déjà ciblée (donc ici la première). Il faudrait que j'arrive soit à remplacer la cible '.section' par un truc du genre "élément en cours", ou alors passer toutes les éléments frères comportant la classe .section dans une sorte de boucle. Mais je ne vois pas comment procéder...

Voici la page de test avec le code jQuery : One Page

Édit : j'ai renommé le titre pour qu'il soit plus explicite.
Modifié par Olivier C (17 Mar 2015 - 17:03)
Hello,

Voici une autre méthode. Smiley biggrin

J'utilise les id des "section" pour déterminer la navigation au clavier ou clique sur le menu.
Wahoo...

@SolidSnake || @Oken : vous êtes formidables.

J'étais en train de me pencher sur une solution ajoutant une class .active sur la section précédente et suivante... et là, hop, sur un plateau. Je vais tenter de comprendre vos codes quand même, histoire de progresser un peu.

Je vois que Solidnake est allé jusqu'à ajouter une classe .active sur le menu, détail qui était mon objectif suivant... (il y a des oublis de points virgules, mais que l'on repère facilement avec des scripts tel que jshint, rien de bien méchant).

Pour la solution de Oken, un petit supplément pour ajouter les id dynamiquement sur chaque section (puisque ces ids ne servent qu'au js) :
$(function() {
	// Ajout d'une id par conteneur
	$('.section').attr({ // Ajout d'une id par section
		id: function(index) {
			return 'section-' + (index + 1); // Le '+1' sert à faire commencer les ids à '1' plutôt qu'à '0' par défaut
		}
	});
});


Merci à vous deux.
Olivier C a écrit :
il y a des oublis de points virgules, mais que l'on repère facilement avec des scripts tel que jshint, rien de bien méchant)

En fait ce ne sont pas des oublis, mais une "norme" que je ne respecte pas des masses Smiley lol (à tort peut-être ou pas s'il on ne fait pas n'importe quoi, vieille habitude du C)
Modifié par SolidSnake (17 Mar 2015 - 12:25)
@SolidSnake : effectivement c'est bien une norme dont il s'agit, norme que je suis obligé de respecter car mes scripts sont automatiquement vérifiés avant d'être minifiés...

Un petit peaufinage pour apporter ma pierre à l'édifice : je m'aperçois que ton code ne permet plus le déplacement à l'intérieur d'un input/textarea, j'ai donc ajouté un if() pour le faire fonctionner dans toutes les conditions (enfin je pense) :
var tag = e.target.tagName.toLowerCase(); // Détecte sur quel élément est exécuté le script
if (tag != 'input' && tag != 'textarea') { // Test de l'élément 
	if (e.keyCode == 37) { // Arrow left
		// les instruction pour cette touche...
	}
}

Modifié par Olivier C (17 Mar 2015 - 14:21)
Ouais, pas bête Smiley sweatdrop Ça peut servir de pouvoir écrire.

Une autre manière de l'écrire :
var $target = $(e.target);

if ( !$target.is(':input') ) {
  e.preventDefault();
  
  ...
}

Le :input permet de sélectionner en gros tous les types d'éléments de formulaire (y compris textarea et button) donc c'est la classe.

Question : tu utilises grunt pour ton check et ton minify automatique ?
SolidSnake a écrit :
Question : tu utilises grunt pour ton check et ton minify automatique ?

Entre autre... Au départ j'utilisais tout un tas de plugins couplés à Sublim Text 3, puis je me suis collé aux task runners car je m'intéressais au plugin Autoprefixer pour le CSS, bien plus intéressant en plugin Grunt qu'en plugin "autocomplétif" à destination d'un éditeur (le code de développement reste "propre" et/ou plus besoin de maintenir une plétore de mixins sass couplée à des @includes).

Et puis j'y ai pris goût : vérification de la validité des scripts, minification des js et scss, démarrage de serveurs locaux, écriture de bannières à la volée (avec par exemple modification d'une date "lastmodified" si modification du fichier add hoc), etc... Aujourd'hui je ne pourrais plus m'en passer.

Mon seul problème avec Grunt est que je n'ai pas encore réussi à configurer un FTP (pour remplacer Filezilla).

Point important pour une équipe (pas pour moi qui suis amateur solo) : avec les task runners, un dev front-end n'a plus qu'à lire le fichier Gruntfile.js du projet (ou Gulpfile.js c'est selon) pour connaitre l'ensemble des tâches courantes configurées pour celui-ci.
Modifié par Olivier C (18 Mar 2015 - 08:14)
Encore une petite modif' : en admettant que nous laissions l'utilisation par défaut des touches 38 (up) et 40 (down) - utiles pour scroller au clavier sur les sections supérieure à 100% de hauteur de la page - on se rend compte que ces touches sont inaccessibles de par la configuration de event sur le script. Pour les rendre à nouveau actives il faut supprimer la ligne contenant :
e.preventDefault();

Et ça roule...
Modifié par Olivier C (17 Mar 2015 - 17:58)
Oui, c'est parce que j'avais ajouter up et down aussi comme touche clavier, et le preventDefault emêchait la page de monter/descendre avant le scroll, mais tu pourras toujours le laisser dans le if(e.keyCode==xx ) je pense (même s'il n'est plus trop utile dans ton cas)
Modifié par SolidSnake (18 Mar 2015 - 07:49)
Sujet clos
Aller à