Étiquette : astuce

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 code : afficher le contenu d’une DIV après un délai

Voici le style CSS à placer dans l’entête de la page (HEAD) :

Et voici le contenu à placer dans le corps de la page (BODY):

Fonctionnement du script

Voici comment fonctionne le script : on recherche le bloc DIV qui possède l’identifiant #exemple_div et on lui injecte le contenu de la variable delayed_text après le délai en secondes défini dans la variable time.

[box type= »info »]Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.[/box]

Simple et efficace.

Web/Tech

Bash : rechercher une chaîne dans des fichiers de manière récursive avec Grep

Par Matt 16 juillet 2015

Voici une petite technique utile pour rechercher la présence d’une chaine de texte dans le contenu des fichiers d’un répertoire.

Sous linux, j’utilise très fréquemment la commande grep.

La syntaxe de grep

La syntaxe de grep est toute simple puisqu’elle consiste à définir des options de recherche, suivies des mot-clés à chercher, et enfin du répertoire de travail.

Voilà ce que cela nous donne :

grep [option] "text string to search" directory-path

Grep en action

Sur le serveur, on se place dans le répertoire de travail pour y lancer cette commande :

grep --color --include=\*.{php,js,css} -rnwe "recherche" .

Voici le détail des arguments :

--color : pour activer la colorisation des résultats
--include=\*.{php,js,css} : les extensions de fichiers à cibler
-r : de manière récursive
-n : avec les numéros de ligne
-w : mots complets de la recherche (recherche stricte)
-e : active la regex sur les extensions de fichiers

Note : le terme à recherche doit être entre guillemets et il faut bien ajouter le point (.) final ou alors explicitement donner le chemin complet du répertoire de travail.

Grep et les expressions régulières

Il est également possible d’utiliser des expressions régulières avec Grep :

grep --color -HnR "add_[a-zA-Z].*_page.*, [0-9]*," /home/public_html/wp-content/plugins/

Très utile pour rapidement trouver une fonction devenue obsolète ou un bout de code utilisé dans plusieurs fichiers.

WordPress

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

Par Matt 15 janvier 2015

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase « j’ai mangé une tarte à la crème à Noël » avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

astuce

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