Projet 1 jQuery – apcpedagogie

Barre latérale à position fixe avec défilement animé

Objectifs

Utiliser Jquery pour créer une barre latérale à position fixe avec défilement animé

Présentation

Description

Barre latérale à position fixe avec défilement animé
Dans ce projet, nous allons créer une barre latérale qui émule la position: style CSS fixe mais ne souffre pas des mêmes limitations qu’une solution CSS pure.
Nous pouvons également ajouter une animation attrayante à la page afin que lorsque vous cliquez sur les éléments de navigation dans la barre latérale, différentes parties de la page défilent en vue.
Ce qui suit est une capture d’écran qui montre le résultat final de ce projet:

Projet 1 jQuery

Tâches

Pour terminer ce projet, nous devrons effectuer les tâches suivantes:

Création d’une page de démonstration appropriée
Stockage de la position initiale de l’élément fixe
Détection du défilement de la page
Gestion de la fenêtre du navigateur redimensionnée
Automatisation du défilement
Restauration du bouton de retour du navigateur
Gestion du fragment de hachage lors du chargement de la page

Pages à réaliser

Créer un dossier racine de notre projet
Commencer par créer une page HTML nommée "fixed-sidebar.html".
Créer une nouvelle feuille de style appelée "fixed-sidebar.css", que nous pouvons enregistrer dans le dossier css.
Un nouveau fichier JavaScript appelé "fixed-sidebar.js", qui doit être enregistré dans le dossier js

Création d’une page de démonstration appropriée

Créer un lien vers la nouvelle feuille de style dans la partie <head> de la page HTML en utilisant le nouvel élément <link> suivant:

<link rel="stylesheet" href="css/fixed-sidebar.css"

Faite la même chose pour le fichier javascript en utilisant la balise <script>
<script src="js/fixed-sidebar.js"
Nous allons utiliser une mise en page de base pour notre page composée des éléments suivants, qui devraient être ajoutés à la page "fixed-sidebar.html"

<body>
<div class="wrapper">
<article>
    <h1>Example content area</h1>
    <section id="part1">
    </section>
    <section id="part2">
    </section>
    <section id="part3">
    </section>
    <section id="part4">
    </section>
    <section id="part5">
    </section>
</article>
<aside>
  <h2>contenu important à corriger en place</h2>
  <nav>
    <h3>Certains dans la page  de navigation</h3>
    <ul>
      <li><a href="#partie01">Section 01</a></li>
      <li><a href="#partie02">Section 02</a></li>
      <li><a href="#partie03">Section 03</a></li>
      <li><a href="#partie04">Section 04</a></li>
      <li><a href="#partie05">Section 05</a></li>
    </ul>
  </nav>
</aside>
</body>

La page CSS

Projet 1 jQuery

Mémorisation de la position initiale de l’élément fixe

Avant de pouvoir fixer l’élément en place, nous devons savoir où se trouve cet endroit. Dans cette tâche, nous obtiendrons la position de départ actuelle de l’élément <aside> que nous allons fixer en place.
Pour cette page en doit commencer avec:
$(function() {});
Nous pouvons mettre en cache quelques éléments sélectionnés par jQuery en haut de notre fonction, et pour stocker la position initiale de l’élément fixe, nous pouvons ensuite ajouter le code suivant dans la fonction que nous venons d’ajouter:

var win = $ (window), 
    page = $ ("html, body"),
    wrapper = page.find("div.wrapper"), 
    article = page.find("article"), 
    fixedEl = page.find("aside"), 
    sections = page.find("section"), 
    initialPos = fixedEl.offset(), 
    width = fixedEl.width(), 
    percentWidth = 100 * width / wrapper.width();

Explication

Nous avons ajouté une mise en page très simple pour créer notre page de démonstration. Le HTML5 <article> est rempli de cinq HTML5 <section> différents, chacun avec ses propres attributs id.Nous les utiliserons un peu plus tard dans le projet pour permettre une navigation animée entre eux.
Dans l’exemple de code précédent, chacun des <section> est vide. Mais si vous suivez et écrivez l’exemple de code au fur et à mesure, vous devez remplir chacun d’eux avec une variété d’éléments aléatoires afin d’augmenter la longueur de la page. Aucun des éléments que nous utilisons dans cet exemple n’a d’importance du tout.
Le HTML5 <aside> est l’élément que nous allons fixer en place, mais le fait que ce soit un <section> n’est pas important – n’importe quel élément peut être utilisé avec cette technique.

Détection du défilement de la page

Notre tâche suivante consiste à détecter le défilement de la page et à corriger l’élément en place lorsque cela se produit. La détection de l’événement de défilement est facilitée pour nous par jQuery, tout comme la définition de la position sur fixed, car il existe des méthodes jQuery simples que nous pouvons appeler pour faire ces choses exactement.
Ajoutez le code suivant au fichier de script directement après les variables que nous avons initialisées dans la dernière tâche:

win.one("scroll", function () { 
            fixedEl.css({ width: width, position: "fixed", 
            top: Math.round(initialPos.top), 
            left: Math.round(initialPos.left) 
            });
    });

Explication

Utilisez la méthode one () de jQuery pour attacher un gestionnaire d’événements à l’objet window que nous avons stocké dans une variable.
La méthode one () déliera automatiquement le gestionnaire d’événements dès que l’événement est détecté pour la première fois, ce qui est utile car nous n’avons besoin que de mettre l’élément en position: fixé une fois.
Dans cet exemple, nous recherchons l’événement scroll. Lorsque l’événement est détecté, la fonction anonyme que nous transmettons en tant que deuxième argument à one () sera exécutée.
Lorsque cela se produit, nous utilisons la méthode css () de jQuery pour définir certaines propriétés de style.
Nous définissons la largeur de l’élément pour contrer les situations où la largeur de notre élément cible augmente en raison du flottement et / ou de la marge sur les éléments environnants.
Nous définissons la position sur fixe et définissons également les propriétés de style haut et gauche en utilisant la position initiale de l’élément que nous avons stocké dans la variable initialPos au début du projet.
Nous utilisons la méthode Math.round () de JavaScript afin d’arrondir les positions des pixels supérieurs et gauches aux nombres entiers, ce qui permet d’éviter tout problème de navigateur avec l’arrondi de sous-pixels.

Gestion de la taille du navigateur

En ce moment, notre élément <aside> sera fixé en place dès que la page défile, ce qui convient à nos besoins tandis que le navigateur reste de la même taille.
Cependant, si la fenêtre est redimensionnée pour une raison quelconque, l’élément <aside> tombera hors de sa position fixe et pourrait être perdu en dehors des limites de la fenêtre.
Dans cette tâche, nous allons corriger cela en ajoutant un gestionnaire d’événements qui écoute l’événement de redimensionnement de la fenêtre.
Pour conserver l’emplacement correct de l’élément fixe par rapport au reste de la page, nous devons ajouter le code suivant directement après la méthode one() que nous avons ajoutée dans la dernière tâche:

win.on("resize", function () { 
        if (fixedEl.css("position") === "fixed") { 
            var wrapperPos = wrapper.offset().left, 
            wrapperWidth = wrapper.width(), 
            fixedWidth = (wrapperWidth / 100) * percentWidth; 
            fixedEl.css({ width: fixedWidth, 
                left: wrapperPos + wrapperWidth - fixedWidth, top: article.offset().top }); 
        }
    });

Explication

Cette fois, nous utilisons la méthode on() de jQuery pour attacher notre gestionnaire d’événements.
Nous passons deux arguments à cette méthode; le premier est l’événement que nous écoutons, qui dans cette tâche est l’événement de resize() de la fenêtre, et le second est la fonction que nous souhaitons exécuter lorsque l’événement est détecté.
Nous voulons seulement repositionner et redimensionner l’élément <aside>si la page a déjà défilé et que la position de l’élément a été fixée, donc avant de faire quoi que ce soit d’autre, nous vérifions d’abord que c’est le cas.

Si la position de l’élément est définie sur fixe, nous déterminons d’abord la propriété left actuel de l’élément wrapper à l’aide de la propriété left de l’objet renvoyé par la méthode offset() de jQuery.

Nous obtenons également la largeur de l’élément wrapper en utilisant la méthode width() de jQuery.

Automatisation du défilement

À ce stade, nous devrions être en mesure de cliquer sur l’un des liens du menu de navigation que nous avons ajouté à l’élément fixe, et la page sautera pour afficher la section correspondante.
L’élément fixe sera toujours fixé en place.Le saut vers la section est cependant assez choquant, donc dans cette tâche, nous ferons défiler chaque section en place manuellement afin que le saut vers chaque section ne soit pas si soudain.
Nous pouvons également animer le parchemin pour un effet esthétique maximum.
Nous pouvons activer le bouton de retour très facilement en ajoutant un autre gestionnaire d’événements directement après celui des événements de clic que nous venons d’ajouter:

function scrollPage(href, scrollAmount, updateHash) { 
        if (page.scrollTop() !== scrollAmount) { 
            page.animate({ scrollTop: scrollAmount }, 500, function () { 
                if (updateHash) { document.location.hash = href; } 
            }); 
        }
   }

Ensuite, nous pouvons ajouter un gestionnaire d’événements de clic sur la navigation dans notre élément fixe. Cela devrait être ajouté directement après la fonction scrollPage () que nous venons d’ajouter:

page.on("click", "aside a", function (e) { 
        e.preventDefault(); 
        var href = $(this).attr("href"), 
        target = parseInt(href.split("#part")[1]), 
        targetOffset = sections.eq(target - 1).offset().top; 
        scrollPage(href, targetOffset, true);
    });

Restauration du bouton de retour du navigateur

À ce stade, nous pouvons cliquer sur l’un des liens du l’élément "<aside>" et la page défilera en douceur jusqu’à l’emplacement souhaité sur la page.
La barre d’adresse du navigateur sera également mise à jour, mais si l’utilisateur essaie de revenir à une <section> précédente en utilisant le bouton de retour de son navigateur, rien ne se passera.
Dans cette tâche, nous allons corriger cela afin que le bouton de retour fonctionne comme prévu et peut même utiliser un défilement fluide lorsque le bouton de retour est utilisé pour revenir à la <section> précédente
Nous pouvons activer le bouton de retour très facilement en ajoutant un autre gestionnaire d’événements directement après celui des événements de clic que nous venons d’ajouter:

win.on("hashchange", function () { 
        var href = document.location.hash, 
        target = parseInt(href.split("#part")[1]), 
        targetOffset = (!href) ? 0 : sections.eq(target - 1).offset(). top; 
        scrollPage(href, targetOffset, false);
    });

Explication

La méthode on() de jQuery est utilisée pour attacher à nouveau notre événement, et cette fois nous n’avons pas besoin d’utiliser la délégation d’événement, nous revenons donc à la forme à deux arguments de la méthode.
Cette fois, nous écoutons l’événement hashchange , qui, comme précédemment, est transmis en tant que premier argument et se produit chaque fois que la propriété hash de l’object document.location est modifiée.
Dans notre fonction de gestionnaire, qui est transmise en tant que deuxième argument, nous définissons les variables pour les différentes valeurs que nous devons transmettre à la fonction scrollPage() afin d’effectuer le défilement.

Nous n’avons pas besoin d’empêcher le comportement par défaut du navigateur cette fois, et la variable href est définie à l’aide de la propriété document.location.hash car ce sera le bouton de retour qui déclenchera l’événement, pas l’un des liens dans l’élément <aside>.

Gestion du fragment de hachage au chargement de la page

Au moment où la fonctionnalité du bouton de retour du navigateur a été restaurée, et le visiteur peut voir l’URL pouvant être ajoutée aux favoris dans la barre d’adresse lorsque la page se charge.
Si la page est demandée avec un fragment de hachage, la page passera automatiquement à la valeur spécifiée <section>
lorsque la page se charge.
Dans cette partie, nous ajouterons du code qui vérifie la propriété de hachage de l’objet document.location et si un hachage est détecté, il défilera en douceur vers la partie correspondante de la page.
Pour activer cela, nous devons ajouter le code suivant directement après l’endroit où nous définissons nos variables de départ près du haut du fichier de script et directement avant où nous écoutons l’événement scroll:

if (document.location.hash) { 
        var href = document.location.hash, 
        target = parseInt(href.split("#part")[1]), 
        targetOffset = sections.eq(target - 1).offset().top; 
        page.scrollTop(0); document.location.hash = ""; 
        scrollPage(href, targetOffset, true);
    }

Explication

Dans ce morceau de code, qui sera exécuté dès que la page sera chargée, nous vérifions d’abord si l’objet document.location contient un hachage (ou au moins, contient un hachage qui n’est pas une chaîne vide).
Si c’est le cas, nous obtenons le hachage, obtenons le numéro du <section> et calculer le décalage à partir du haut de la page de la même manière que nous l’avons fait dans les tâches précédentes. Nous mettons ensuite le scrollTop de la page à 0 pour forcer le navigateur en haut de la page. Nous supprimons également le hachage à ce stade
Enfin, nous pouvons appeler la fonction ourscrollPage(), en transmettant le nouveau href, la quantité de défilement requise et définir l’argument final sur true pour que le fragment de hachage correct soit ajouté à la barre d’emplacement du navigateur. Tout doit arriver si rapidement que l’utilisateur ne remarque pas que le chargement de la page a été intercepté et que le comportement a été modifié.

Source: inspiration du livre JQuery Hotshot : Ten Practical Projects That Exercise Your Skill, Build Your Confidence, and Help You Master JQuery
Auteurs: Wellman, Dan
Informations sur la publication: Birmingham, U.K. : Packt Publishing. 2013

Sommaire du cours jQuery

Projet 2 jQuery

Sommaire du cours jQuery

jQuery

Barre latérale à position fixe avec défilement animé

Objectifs

Présentation

Description

Tâches

Pages à réaliser

Création d’une page de démonstration appropriée

La page CSS

Mémorisation de la position initiale de l’élément fixe

Explication

Détection du défilement de la page

Explication

Gestion de la taille du navigateur

Explication

Automatisation du défilement

Restauration du bouton de retour du navigateur

Explication

Gestion du fragment de hachage au chargement de la page

Explication

Sommaire du cours jQuery

Gérer les formulaires avec jQuery et Ajax

Projet 2 jQuery

You may also like

Correction application animate() V2

La méthode animate() de jQuery v2

Correction application animate()