Monthaoût 2017

[Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème

Source. Ceci sous-entend de récupérer l’URL vers l’image stockée dans un thème.

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.

HTML

On crée un container dans lequel on place une balise <img> aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src de notre image en haut de page.

On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).

Cas du Slick Carousel (Drupal 7)

Utiliser la méthode .bind() sur l’événement DOMSubtreeModified ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log() imprime plusieurs fois l’URL récupérée).

SCSS

On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.

Une alternative où l’image est placée en background-image de l’élément body

[Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés

[SASS] Fonctions et mixins pour manipuler les couleurs

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS

[CSS] Des feuilles de style d’impression

Frameworks dédiés à l’impression papier des pages web

Tutoriels

[jQuery] Vérifier qu’un élément est présent dans le DOM lorsqu’on scrolle dans la page

Source: Check if element is visible after scrolling.

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

Attention: merde lorsqu’on utilise des composants de type Accordéon, etc … (lorsque la hauteur de page s’agrandit) !!

Sur chaque page du site, une fonctionnalité de scroll automatique/retour vers le haut de page peut-être ajoutée en exploitant le composant Sticky de Foundation 6. Ce lien de retour devrait apparaître dès qu’un scroll est nécessaire et serait fixé en bas de page sur la limite haute du bloc footer.

Bloc HTML à placer en haut de page (dans le DOM)

Bloc HTML à placer juste avant le footer (dans le DOM)

Code JS

Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…

Code SASS

A noter: la présence de la propriété pointer-events sur .scroll-up.sticky.is-at-bottom et .scroll-up a pour éviter que les éléments qui se trouvent sous la zone (à 100% de largeur) du sticky soient bloqués au clic. <a href="https://caniuse.com/#search=pointer-events">pointer-events</a> ne fonctionnera pas sous IE10 et en-dessous, mais on s’en b*% l$! c*ù|!!€%.

A noter #2: la présence de la propriété // margin-right: -25%; sur .scroll-up a pour permettre de positionner à sa guise le lien.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑