Réponses sur forum DVP
-
input type range with variable gap
Exemple d'<input type="range"> personnalisé avec des « gap » variables et une « tooltip » suivant le curseur.
-
Choix langue
Sélection du choix de la langue en pur CSS en utilisant les sélecteurs d'attribut.
-
Manipulation du localStorage
Exemple de manipulation du localStorage sur une liste de sélection d'un formulaire.
-
Calcul automatique d'un panier
Calcul et mise à jour automatique d'un panier en fonction des quantités choisies.
-
Récupération communes
Afficher les communes disponibles pour un code postal donné en utilisant l'API : geo.api.gouv.fr.
-
Leaflet : lecture et affichage geoJSON
Leaflet : afficher des features issues d'un même fichier geoJSON dans des L.layerGroup séparés.
-
CSSStyleRule analyse des styleSheets
Analyse des règles CSS déclarées dans le document en utilisant la propriété styleSheets de l'objet document.
-
Utilisation de l'événement animationend
Utilisation de l'événement animationend pour démarrer une animation lorsque l'animation en cours est terminée.
-
Boite « rétractable »
Afficher en priorité la fin du contenu d'une boite « rétractable ».
-
Réorganisation d'éléments
Réorganisation d'éléments cochés en « tête de liste » en utilisant la propriété order, des boîtes flexibles (flexbox).
-
Slide avec défilement en boucle
Réalisation d'un slide avec défilement en boucle, sans retour rapide au début en fin.
-
Chart.js type="time"
Utilisation de conversion TIME_TO_SEC et SEC_TO_TIME pour l'affichage de données sans bibliothèque annexe.
-
Affichage/masquage de boutons
Gestion de l'affichage/masquage de boutons « add/delete » en utilisant le CSS et le sélecteur « d'adjacente indirecte » ~ (tilde).
-
Répartition d'éléments dans une Grid Layout
Répartition d'éléments dans une Grid Layout en utilisant la propriété grid-template-areas
-
Read more - Read less
Mise en place d'un système « lire +/- » (read more/less) sur des éléments d'une la page.
-
Grid Layout Affichage/masquage
Affichage/masquage d'un élément contenu dans une Grid Layout en jouant avec la propriété grid-template-areas
-
Affichage nombre de vies
Affichage d'un nombre de vies sous forme de cœur SVG.
-
Déplacement éléments suivant largeur conteneur
Déplacer des éléments en fonction de la largeur de leur conteneur vers un autre conteneur.
-
Alignement vertical d'une fraction
Aligner verticalement une fraction dans son conteneur.
-
Nombre de colonnes variable
Affichage d'un nombre variable de colonnes en fonction de la largeur du viewport à l'aide des media queries.
-
Undo/Redo pour <textarea>
Fonctionnalité Undo/Redo applicable à un élément <textarea>.
-
Plugin maphilight by David Lynch
[usemap] mise en application du plugin maphilight, de David Lynch, et adaptation aux images responsives.
-
Tooltip (infobulle) avec flèche
Réalisation d'une tooltip avec bordures, flèche et transparence sans élément HTML ajouté, juste avec un pseudo-élément ::before
-
[Snap.svg] Simulaton du z-index sur éléments SVG
L'attribut z-index n'est pas applicable aux éléments SVG. On peut toutefois modifier l'empilement en déplaçant l'élément dans l'arborescence de rendu.
-
<canvas> mode de fusion
Synthèse des couleurs additive/soustractive et mode de fusion applicable à un élément HTML <canvas>
-
<canvas> mode de composition
Opérations de composition et découpe appliquables lors du dessin de nouvelles formes sur un élément HTML <canvas>.
-
Leaflet : lecture et affichage données distantes
Leaflet : lecture et affichage de données distantes dans une popup.
-
Suppression d'une option déjà choisie
Supprimer l'<option> déjà choisie d'un <select> dans le ou les <select> liés suivants.
-
Calcul hauteur d'un texte
Calcul de la hauteur réellement occupée par un texte dans son conteneur en utilisant un élément <canvas>.
-
Masquage de colonne avec classe
Comment masquer une colonne de cellules d'une <table> en affectant dynamiquement une classe CSS à la <table>.
-
Arbre de décision dynamique
Réalisation d'un arbre de décision dynamique construit à la volée.
-
Suppression des doublons d'un Array
Test de « performance », comparaison des méthodes set, includes et filter sur les Array.
-
Superposition d'images positionnées
Superposition d'images positionnées par rapport à une autre pour un comportement « responsive ».
-
Numérotation des lignes d'un élément <pre>
[CSS] Ajout d'un numéro de ligne pour du code contenu dans un élément <pre> via l'utilisation d'un pseudo-élément ::before unique.
-
Affiche/masque one or more
Affichage/masquage d'un ou plusieurs éléments au clic sur un <button>, le principe des « Tabs content » en fait.
-
Raphaël : with an element <g>
Raphaël JS : Rotation d'un disque au déplacement (drag) de la souris et test de performance, en utilisant un élément <g> non supporté en natif.
-
Raphaël : Element.transform([tstr])
Raphaël JS : Rotation d'un disque au déplacement (drag) de la souris.
-
Leaflet : L.FeatureGroup
Leaflet : utilisation d'objets L.featureGroup() pour afficher/masquer des layers.
-
Gabarit simple avec display:grid
CSS grid : utilisation des grilles CSS pour réaliser une mise en page simple.
-
« whitespace » en fin de ligne sur FireFox
Prise en compte surprenante du « whitespace » en fin de ligne écran sous FireFox
-
Leaflet : marker L.divIcon
Leaflet : utilisation d'un objet L.divIcon() pour créer un marker à partir d'un élément du DOM.
-
CheckBox On-Off
Toggle Switch with <input type="checkbox">, exemples de customisation.
-
TODO liste
Déplacement d'un élément d'un parent à un autre en utilisant la méthode ParentNode.append().
-
Suppression d'une option déjà choisie
Supprimer l'<option> déjà choisie d'un <select> dans un autre <select> lié.
-
Centrage image avec légende
Centrage image dans la fenêtre d'affichage, en respectant le ratio largeur/hauter, avec légende en bas à gauche.
-
Horloge fluide
Affichage d'une horloge avec déplacement des aiguilles fluide.
-
Défragmentation verticale d'une table (perf.)
Test de « performance » sur défragmentation verticale d'une <table>, les cellules vides vont se retrouvées en bas de chaque colonne.
-
Défragmentation verticale d'une table
Défragmentation verticale d'une <table>, les cellules vides vont se retrouvées en bas de chaque colonne.
-
API Web Speech
Mise en oeuvre simple de l'API Web Speech avec création dynamique des boutons de commande des textes à lire.
-
Info-Bulle sur SVG
Affichage d'une « info-bulle » au passage de la souris sur une carte SVG.
-
Changement d'image de fond au scroll
Changement de la « background-image » lors du scroll de la page.
-
Utilisation de multi-column layouts
[CSS] Eviter le découpage de contenu en colonnes lors d'une mise en page sur plusieurs colonnes (multi-column layouts).
-
Animation en pur SVG
Réalisation animation SVG simple en utilisant l'élément <animateMotion>
-
Leaflet : highlight L.Path
Réalisation d'un « effet de surbillance » (highligth), par ajout d'un contour sur un objet Leaflet.Path
-
Diaporama/Slide with flex container
Utilisation de la propriété order, des boîtes flexibles (flexbox), pour réaliser un diaporama/slide
-
Division de cellule dans un tableau
Zoom du contenu au survol des cellules d'une <table>
-
Changement de fond au survol
Simuler le changement de background-image sur le <body> au survol d'éléments.
-
Exemple ECharts
[ECharts] formatage des axes, résolution de soucis divers.
-
[CSS] Simulation :hover sur parent
Changer la couleur de fond de la <tr> parente au suvol d'une <td>.
-
Drag and drop
Drag and Drop des noms d'une liste dans un groupe.