Dans ce court mémo, on va voir comment rapidement créer un camembert de statistique. On va ici utiliser le plugin chart.js, mais il en existe toute une panoplie : amcharts, highchart, google, canvas. La doc officielle est assez fournie et permet déjà de créer un graphique. Dans notre premier exemple, on va partir sur un […]
Je reprend ici la suite de mon précédent article sur les cartes personnalisées créées avec Leaflet. L’idée ici est d’afficher des icônes de clusters personnalisées, tout en utilisant le plugin markerCluster.js et awesome-marker.js. Je vous invite à consulter mon précédent tuto pour comprendre la manière dont j’ai procédé pour créer toute ma carte. La différence […]
Voici un codePen d’un exemple possible de portfolio pour montrer des images, des vidéos ou tout autre type de contenu. Les images sont disposées en colonne grâce aux propriétés flex. Au clic sur une image, ici une vidéo et un texte associé apparaissent en slideDown sous la vignette, tout en repoussant les images de la […]
Dans ce tuto, on va voir comment rapidement créer une carte à l’aide de Leaflet et de donnes GeoJSON. Vous pourrez retrouver un autre exemple plus complexe, avec l’utilisation des plugin markerCluster.js et awesomeMarker.js ici. Les données GeoJson sont un format de donnée conçu pour représenter des entités géographiques simples , basé sur la notation d’objet JavaScript (JSON). La […]
Voici un CodePen d’une carte sur mesure utilisant leaflet, le plugin markerCluster.js awesome-marker.js ainsi que des données GeoJSON. See the Pen Leaflet Interactive Map with custom Cluster Click action by yuyazz (@yuyazz) on CodePen. Dans cet exemple, j’exploite deux cartes, rangées dans deux tabs. Elle dispose d’un système de filtres personnalisés, d’un panneau latéral dynamique […]
Difficile de donner un titre cohérent à cet exercice ! Dans cet article je partage le code d’un champ select multiple qui en génère un autre. Le scénario est le suivant : j’ai un champ select multiple. L’utilisateur fait son choix : le résultat s’affiche, et pour chaque ligne de résultat, un nouveau champ select […]
Mapael est l’une des nombreuses librairies js pour réaliser des cartes. La librairie fonctionne avec des cartes svg et repose elle même sur Raphael.js et jquery. Cette bibliothèque permet de créer des cartes cliquables assez rapidement, en étant en plus compatible avec la plupart des navigateurs. Mapael dispose de sa propre liste de carte prêtes […]
Aujourd’hui, je vous partage un essai de diagramme en html/css/js. Le but ici est de reproduire un shcéma contenant plusieurs boîtes, reliées entre elles par des flèches. On peut souvent voir ça sur des infographies. Des outils puissants tels que jsplumb. Il existe aussi une foule de bibliothèques js permettant de construire des diagrammes et […]
Voici un exemple de slider crée à l’aide du plugin Slick Slider, très simple d’utilisation. Toutes les options sont sur le site officiel, avec de nombreux exemples. La difficulté peut venir du côté responsive, il n’est pas évident de définir une taille fixe au conteneur et faire en sorte que le slider s’adapte au redimensionnement. […]
Voici ce à quoi nous voulons parvenir : a l’intérieur d’une section, on insère des barres de progression qui vont indiquer au visiteur le nombre, en pourcentage, d’articles par catégorie. C’est le genre de chose que l’on voit souvent sur les portfolios et de nombreux thèmes premium wordpress. Voici mon bloc, on crée une boucle […]