jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne

Il peut arriver que l'on ait besoin de sélectionner un élément dont l'ID ou la classe commence ou finit par un nom défini, pour pouvoir le modifier ou le manipuler. Évidemment, si il possède un ID ou une classe bien défini, on utilisera son ID ou sa classe. Par contre, si aucune classe n'est définie par exemple, il faudra utiliser une expression régulière (regex). On peut faire cela très simplement avec jQuery. Sélectionner tous les éléments dont l'ID commence par […]

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 »

[WordPress] Utiliser headJS avec Better WordPress Minify

[WordPress] Utiliser headjs avec Better WordPress Minify photo

Sur le site, j'utilise le plugin Better WordPress Minify pour compresser le contenu des pages (CSS, JavaScript, HTML) pour n'avoir que quelques fichiers à charger pour améliorer les temps de rendement. Il est très utile d'utiliser headJS, qui permet lui aussi de charger plusieurs fichiers javascript en un seul appel, en les concaténant. Voici un petit tutoriel qui permet d'allier Better WordPress Minify avec headJS. Édition de Better WordPress Minify Il n'y a malheureusement pas d'option ou de filtre pour […]

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 »

Nouveautés du site : hiver 2013 - printemps 2014

Voici une petite liste des derniers ajouts, modifications et améliorations du site ces derniers mois : [*] PHP : déplacement de mes bouts de code du fichier functions.php pour les organiser dans un fichier-plugin. [*] HTML : ajout des meta Dublin Core sur la page d'accueil, passage des balises H2 en H1 pour les titres des articles, correction du code HTML5 parce que le validateur W3C a changé ses recommandations. [*] CSS : nettoyage du code CSS. J'ai remplacé les […]

Lire la suite »

Nouveautés du site : été-automne 2013

Voici les quelques mises à jour du serveur et du site depuis quelques mois : [+] Serveur : mise à jour du noyau Debian : passage du noyau 2.6.38.2 au noyau 3.8.13. Cela m'aura permis de rebooter le serveur après 260 jours d'uptime... cela fait toujours de la peine de rebooter un serveur qui tourne bien pour appliquer une mise à jour! [+] Serveur : Activation de X11 forwarding pour SSH. [+] Serveur : optimiser toutes les images JPG et […]

Lire la suite »

Nouveautés du site : printemps 2013

Voici les derniers ajouts au site depuis le début de l'année: [+] vous pouvez désormais poster des vidéos en commentaire juste en donnant le lien texte de la vidéo (merci Anne-Gaëlle pour la sugggestion). [+] le javascript est désormais chargé de manière asynchrone grâce à la librairie head.js. En pratique, la page (HTML, CSS, images) se charge et l'utilisateur peut interagir avec immédiatement, le code javascript est lui chargé après. Cela règle le problème que j'avais évoqué en novembre 2012. […]

Lire la suite »

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

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

Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d'afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries. Étant donné que jQuery est présent sur toutes les pages du site, j'ai adapté le script pour qu'il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger). Un script Javascript répondant à des besoins précis J'écris pas mal de code […]

Lire la suite »

Optimisation du site : octobre et novembre 2012

Optimisation du site : octobre et novembre 2012 photo 1

Ces derniers mois, j'ai passé un peu de temps à valider mes pages (HTML5) et à corriger quelques petits détails comme le chargement des javascripts en fin de page, l'optimisation de ma feuille CSS pour éviter les reflows... bref, j'ai optimisé le site. Et bien voilà ce que cela nous donne chez GTmetrix : et chez Pingdom : La plupart des erreurs restantes sont dues à l'admin bar WordPress (surtout au niveau des CSS) et à la publicité, que je […]

Lire la suite »

Installer des scripts JavaScript utilisateur sous Opera

opera-browser

Il est possible d'ajouter des scripts JavaScript utilisateur (ou userscripts) sous Opera pour ajouter des fonctions supplémentaires au navigateur. Cependant, ce code ne peut être lancé directement, il y a quelques réglages à effectuer. Voici comment configurer Opera pour y lancer nos scripts JavaScript en quelques étapes. Réglages du dossier des scripts JavaScript sous Opéra Allez dans Tools –> Preferences (Outils –> Préférences) ou faîtes Ctrl + F12 au clavier. Naviguez dans Advanced –> Content –> JavaScript Options (Avancé –> […]

Lire la suite »

Le site de l'Académie de Créteil n'accepte que deux navigateurs : Internet Explorer et Firefox

creteil-navigateurs

Ces derniers temps, je travaille sur le site internet du collège. Du coup, j'ai moins de temps pour le mien tiens. Bref, j'y travaille donc et je rajoute quelques petits liens utiles comme des liens vers l'Inspection Académique, le Bulletin Officiel, le site académique... que des sites qui ne sont visités que par les personnels de l'Éducation Nationale en somme. Vu que je fais les liens, je jette un œil au sites sus-cités. Et là, paf!, un message d'erreur que […]

Lire la suite »

Modifier n'importe quelle page web avec votre navigateur

Modifier n'importe quelle page web avec votre navigateur photo

Bon, c'est une astuce un peu érodée maintenant et je suis sûr que vous êtes plusieurs ici à la connaître mais je la rajoute quand même ici pour référence. J'ai montré cela au responsable TICE de mon collège récemment et il n'en revenait pas : il est bel et bien possible de modifier n'importe quelle page web avec n'importe quel navigateur et tout cela directement en ligne, en utilisant une ligne de javascript.

Lire la suite »

Pin It on Pinterest

Spelling error report

The following text will be sent to our editors: