Mois : mars 2019

[CSS] Ajuster une ancre de page à la hauteur d’un bandeau fixe (sticky)

offsetting an html anchor to adjust for fixed header [duplicate]


Autre solution

offsetting an html anchor to adjust for fixed header

[jQuery] similarElements.js – Un plugin pour gérer la mise à jour dynamique de plusieurs éléments aux actions similaires dans une même page

Démo sur jsFiddle.net et code source de la demo ici.

Sources du plug-in similarelements.js sous Git.

L’idée de départ est de pouvoir piloter de manière dynamique un certain nombre d’éléments de la page qui déclenchent une même action. L’action sera déclenchée une seule fois, mais tous les éléments pourront être mis à jour. On peut exécuter de manière séparée du code pour l’élément activé et les éléments similaires non-activés qui doivent quand-même faire l’objet d’une mise à jour.

Utilisation du plug-in

Source du plug-in


ATTENTION: en dessous de cette ligne, mes notes sur le projet en cours. Si vous souhaitez utiliser ce plug-in en production, utilisez la source git et référez-vous aux notes au-dessus de cette ligne. Merci.

ATTENTION: code expérimental. Ce code fonctionne très bien mais ne peut pas forcément être réutilisé comme un plugin mais plutôt comme un pattern…

Pour être vraiment utile et ré-utilisable à la volée, ce plugin devrait donner la possibilité d’exécuter du code externe à sa source lors de son initialisation un peu comme dans enquire JS qui permet d’exécuter du code si certaines conditions prévues par le plugin (match, unmatch, setup, deferSetup, destroy) sont remplies.

Dans le cas de silimarElements.js, les conditions seraient triggeredElement, nonTriggeredElement, mais je dois encore creuser ça…

Utilisation

Dans l’exemple, j’agis sur plusieurs boutons tous présents dans la même page et qui effectuent tous la même action. Cependant, l’action prévue au click ne sera exécutée qu’une fois mais les libellés des autres boutons proposant la même action auront aussi besoin d’être mis à jour.

Ce plugin se veut (une fois terminé) assez souple pour pouvoir gérer autre chose que des boutons ou des événements click. N’importe quel event jQuery peut être utilisé en argument.

L’idée de départ est de pouvoir piloter de manière dynamique un certain nombre d’éléments de la page qui déclenchent une même action. L’action sera déclenchée une seule fois, mais tous les éléments pourront être mis à jour.

L’argument scopeWithinDOM est probablement amené à disparaître car il pourra être défini à l’initialisation du plug-in, en dehors de son code source.

Code source de la demo

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

  1. Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
  2. Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

Source JS (jQuery)

Source CSS

[jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page

Attention: vous trouverez une évolution de ce code ici: [jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache.

nui = naked UI = code stripped to the core.

Dans mon exemple, j’utilise cette fonction pour un composant Off-Canvas qui propose une navigation interne à la page (via des ancres). J’affiche/masque l’élément en exploitant la valeur booléenne de la pseudo-classe aria-expanded que j’habille via CSS. Pas de SASS (pour l’instant), désolé…

J’utilise également Animate CSS pour apporter un peu d’animation au tout via les classes animated fadeInUp et le kit d’icônes Font Awesome pour les chevrons.

How to Create a Basic Plugin sur jquery.com. Essential jQuery Plugin Patterns par Addy Osmani sur smashingmagazine.com.

[jQuery] Plug-in: afficher/masquer proprement des éléments du DOM avec une fonction