Le terme de comparateur est ici un peu trompeur, en fait l’idée est de donner à l’utilisateur la possibilité, à partir d’une page produit, de connaître les interactions avec d’autres produits. On part donc du principe qu’on est déjà dans une page produit. Dans celle-ci, on va afficher un groupe de champ qui nous servira […]
Les repeater-fields d’ACF permettent de créer des sous-champ aux traditionnels « custom fields » du plugin, donnant plus de flexibilité et de plus grandes possibilités d’affichage sur votre site. La bonne nouvelle, peu diffusée, c’est qu’Elliot Condom (l’auteur du plugin) lui même met à disposition sur une page GitHub une version isolée du « repeater field », et celle-ci […]
Dans ce tuto on va voir comment on peut valider un formulaire html/css en un temps record, grâce au plugin jquery-validate.js. Il en existe beaucoup d’autres, comme validate.js, et il est également possible de le faire en javascript natif, comme le montre le site W3shools. See the Pen Simple jquery-validate form by blindDev (@yuyazz) on […]
Dans un précédent tuto, on a vu comment mettre rapidement en place un graphique de statistique par année. Vous pouvez vous référer au précédent tutoriel pour construite tout votre graphique. Voici le rendu avec des légendes personnalisées: See the Pen Chart js Donught with custom labels by blindDev (@yuyazz) on CodePen. A la différence du […]
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 […]
Si l’on se réfère à la page référence, « La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ». Cette propriété permet donc de contourner un élément en épousant sa forme. On peut utiliser une valeur avec un mot clé Une valeur […]
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 dans lequel je teste différentes solutions souvent citées sur stackoverflow. Le but est de faire en sorte que la div enfant déborde et prenne toute la largeur de l’écran. See the Pen Full Width Containers in Limited Width Parents by blogob (@yuyazz) on CodePen. La solution la plus pratique est la deuxième […]
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 […]