CSS : supprimer subtilement le placeholder d’un champ input ou textarea

CSS : supprimer subtilement le placeholder d'un champ input ou textarea photo

Je viens de finir un projet sur Codeable qui utilisait WordPress et Gravity Forms et lors de la réalisation d’un formulaire de réservation complexe, je me suis heurté à Chrome qui ne supprime pas toujours (suivant les versions utilisées) le texte du placeholder d’un champ de type input ou textarea lorsque le curseur est placé à l’intérieur (action focus). Normalement, la valeur du placeholder disparaît et permet à l’utilisateur de compléter sa saisie mais sous certaines versions de Chrome, cela […]

Lire la suite »

CSS : remplir le contenu d’une div de manière fluide

CSS : remplir le contenu d'une div de manière fluide photo

J’ai récemment été confonté à un problème lors de la réécriture du code CSS d’un formulaire Gravity Form : on voulait que le contenu remplisse la div, sans sauter de ligne lorsqu’il n’y en avait pas besoin. Je pensais naïvement qu’un simple float:none et une largeur à 100% suffiraient : .gfield_label { float: none !important; width: 100% !important; } Mais cela a fini par chambouler tous les champs de formulaires : labels et champs n’étaient plus sur la même ligne. […]

Lire la suite »

JavaScript : afficher du contenu dans un bloc DIV après un délai défini

Javascript : afficher le contenu d'un bloc HTML après un délai variable photo

Voici comment afficher du contenu (texte, HTML, JS, CSS ou tout autre contenu) dans un bloc DIV, après un délai que vous aurez préalablement défini, le tout en JavaScript. C’est écrit en JavaScript pur (vanilla JavaScript), c’est-à-dire sans librairies supplémentaires, et donc compatible avec tous les navigateurs. On utilise innerHTML pour faire apparaître la div après le délai imparti. Exemple de contenu affiché après un délai Le texte suivant apparaît 7 secondes après le chargement de la page : Le […]

Lire la suite »

HTML5 : corriger l’erreur “element link is missing required attribute property”

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : pas d’attribut property pour les feuilles de styles du corps de page Si, lors de la validation HTML5 de vos pages, vous obtenez le message d’erreur de validation suivant : “Element link is missing required attribute property” … alors il y a fort à parier qu’une feuille de style (CSS) est appelée via une balise link dans le corps de votre page (body) au lieu d’être insérée dans l’entête (header) comme à l’accoutumée. Sous WordPress par exemple, […]

Lire la suite »

Nouveautés du site : hiver 2014-2015

gradient-optimisation

Pas mal de nouveautés ont fait leur apparition sur le site cet hiver. La plupart sont under the hood et donc invisibles mais pour le reste, voici ce qui a été ajouté, modifié ou retiré. Sécurisation du serveur email Sur le serveur de mail, j’ai ajouté l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim, ce qui permet de rendre les messages plus fiables puisqu’ils sont désormais signés lors de l’envoi du serveur. Cela permet notamment de ne […]

Lire la suite »

HTML5 : corriger l’erreur “The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : l’attribut HTML frameborder Si vous obtenez l’erreur : “The frameborder attribute on the iframe element is obsolete. Use CSS instead.” sur le validateur HTML5 du W3C, c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l’exemple suivant : <iframe frameborder="0" … /> La solution : la propriété CSS border Comme l’attribut frameborder n’est plus présent dans HTML5, il faut utiliser la propriété border en CSS à la place […]

Lire la suite »

HTML5 : corriger l’erreur “The scrolling attribute on the iframe element is obsolete. Use CSS instead.”

HTML5 : corriger l’erreur "element link is missing required attribute property" photo

Le problème : l’attribut HTML scrolling Si, au détour d’une validation du code HTML5 de votre page, vous obtenez l’erreur suivante: “The scrolling attribute on the iframe element is obsolete. Use CSS instead” … c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut scrolling comme dans le code suivant : <iframe scrolling="no" … /> La solution : la propriété CSS overflow Comme l’attribut scrolling ne fait plus partie des spécifications HTML5, il faut utiliser […]

Lire la suite »

jQuery : script toggle pour afficher et cacher de multiples blocs HTML

jQuery : script utilisant la fonction toggle pour afficher/cacher un bloc HTML photo

J’ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m’ont demandé comment faire pour afficher plusieurs blocs HTML . Voici comment s’y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest(). Démo Article A Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam […]

Lire la suite »

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare photo

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress. WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide. Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare. Valider le code oEmbed de YouTube Il suffit de lancer les quatre requêtes […]

Lire la suite »

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits. C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran : Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive : redéfinition des […]

Lire la suite »

Nouveautés du site : septembre 2014

(Avec un peu de retard) et après des vacances fort reposantes, voici les quelques derniers ajouts et améliorations du site : [+] WordPress : transformation des pages en articles. Avec la suppression des dates dans les URLs (link), il n’y a plus aucune raison d’avoir du contenu dans des pages. Le site passe donc de 230 pages à… seulement douze. Je garde juste les pages institutionnelles : contact, à propos etc. Un plugin m’a beaucoup aidé : Vice Versa. [+] […]

Lire la suite »

Page 1 sur 712345...Dernière »

Pin It on Pinterest

Spelling error report

The following text will be sent to our editors: