Tag

JavaScript

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

J’ai eu besoin de tester l’existence d’un paramètre GET dans une URL en utilisant JavaScript. Il se trouve que cela ne prend que quelques lignes.

Pour ce tutoriel, nous allons considérer l’adresse de la page suivante, avec preview=yes passé comme paramètre:

https://example.com/?preview=yes

1. On récupère les paramètres passés dans l’URL de la page:

let searchParams = new URLSearchParams(window.location.search);

2. On vérifie si l’un des paramètres recherchés est présent. Ici, on souhaite savoir si le paramètre previewexiste:

searchParams.has('preview'); // returns true

3. On vérifie maintenant si previewest égal à yes:

let param = searchParams.get('sent');
param; // echoes 'yes'

Il ne nous reste plus qu’à utiliser la variable param pour l’utiliser ou la comparer.

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

jQuery possède une limitation qui peut s’avérer très gênante : on ne peut ajouter !important à une propriété CSS en utilisant un script jQuery.

Par exemple, ceci ne fonctionnera pas:

jQuery('.foo').css('border', '4px #000 solid !important');

alors que cette déclaration sera bien appliquée:

jQuery('.foo').css('border', '4px #000 solid');

Pour contourner cette limitation, je vous propose plusieurs solutions.

Première solution : utiliser la fonction addClass()

C’est probablement la solution la plus simple : il suffit d’ajouter une classe votre élément avec addClass(), puis de définir le code CSS relatif à cette classe.

Exemple:

jQuery('.foo').addClass('border-black');

et on ajoute le code CSS suivant:

.border-black{
    border: 4px #000 solid !important;
}

Deuxième solution : utiliser la fonction attr()

Une autre solution est d’utiliser la fonction attr(), avec une concaténation pour garder le style CSS inline s’il est déjà présent:

jQuery('.foo').attr('style', function(i,s) { return (s || '') + 'border:4px #000 solid !important;' });

Troisième solution : utiliser la propriété cssText

Toujours en utilisant la concaténation pour garder les styles inline existants, nous utilisons la propriété cssText de la fonction css() :

jQuery('.foo').css('cssText', jQuery('.foo').css('cssText')+'border: 4px #000 solid !important');

Quatrième solution : utiliser style.setProperty()

Ce n’est pas parce que l’on utilise jQuery que nous devons oublier le vanilla JavaScript. En l’occurrence, JS offre nativement la fonction style.setProperty() qui nous permet d’appliquer notre style aisément:

jQuery('.foo').each(function(){
   this.style.setProperty( 'border', '4px #000 solid', 'important' );
});

Have fun!

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 toto_

Prenons un petit exemple, nous allons chercher à sélectionner tous les élements dont l’ID commence par toto_:

jQuery('[id^=toto_')

Le signe ^ signifie que l’on se place en début de chaîne dans l’expression régulière. Ensuite, il suffit d’indiquer la chaîne à chercher, c’est-à-dire toto_ dans notre cas.

S’il s’agit d’un champs de formulaire <input>, on trouvera donc:

<input id="toto_01" type="number" />
<input id="toto_02" type="number" />
<input id="toto_03" type="number" />

Sélectionner tous les éléments dont l’ID finit par _toto

Cherchons maintenant à sélectionner tous les éléments dont l’ID finit par _toto:

jQuery('[id$=_toto')

Cette fois, on utilise l’argument $, qui signifie la fin d’une chaîne de caractères.

Exemple concret : remplacer le type de tous les champs de formulaire dont l’ID finit par -money

J’ai récemment eu à modifier le comportement d’une page de réglages d’un plugin pour WooCommerce.

En substance, les champs étaient de type number, ce qui est problématique car ils ne permettent que des nombres entiers. Or, s’agissant d’un système de conversion de devises, il était primordial d’avoir accès à des nombres flottants, avec des virgules.

La solution est de cibler tous les champs finissant par -moneyet d’en changer le type de number à text, ce qui se fait très facilement avec la requête suivante:

jQuery('[id$=-money]').attr('type', 'text');

Et si l’on veut cibler les classes?

Dans les exemples précédents, il suffit de remplacer le mot idpar le mot class.

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.

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

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.

Ne pas oublier d’échapper les slash par des antislash dans les balises de fermeture (liens, paragraphes etc) dans la variable delayed_text.

Simple et efficace.

bwp-minifySur 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 cela donc nous allons devoir éditer le fichier class-bwp-minify.php :

nano /bwp-minify/includes/class-bwp-minify.php

On recherche ensuite la fonction get_minify_tag.

On remplace, autour de la ligne 2723 :

case 'script':
$return  = "\r\n";
break;

par :

case 'script':
 //MATT - https://www.skyminds.net
$return  = "\r\n";
	break;

Et voilà, tous les fichiers javascript gérés et minifiés par Better WordPress Minify seront maintenant chargés via headJS.

jqueryJ’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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article B

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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Article C
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 et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Le script

1. Ajoutez jQuery dans l’entête de votre page (head), comme ceci :

  

[et_pb_section admin_label=”section”]
[et_pb_row admin_label=”row”]
[et_pb_column type=”4_4″]
[et_pb_text admin_label=”Text”]
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).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

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 ne peux pas contrôler.

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

  1. Allez dans Tools –> Preferences (Outils –> Préférences) ou faîtes Ctrl + F12 au clavier.
  2. Naviguez dans Advanced –> Content –> JavaScript Options (Avancé –> Contenu –> Options JavaScript).
  3. Dans la nouvelle fenêtre, cliquez sur le bouton Choose et sélectionnez le dossier qui contient les fichiers JS. C’est dans ce dossier que vous devrez stocker tous les scripts JavaScript Opera :

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 je ne peux m’empêcher de partager ici avec vous :

Alors là, bien joué les gars ! C’est bien la peine d’avoir un site XHTML 1.0 valid (bel effort, soulignons-le) si c’est pour mettre à la porte tous les visiteurs qui possèdent un navigateur autre qu’Internet Explorer 8 ou Firefox 3.

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.

sandglassJ’ai eu l’occasion récemment d’écrire un formulaire de contact ainsi que son traitement PHP pour une entreprise de construction canadienne qui cherche à recruter du personnel.

Je commence à écrire le code. Je connais bien les formulaires étant donné que c’est l’un de mes premiers scripts (2001 si je ne m’abuse). Je place le script sur mon serveur, commence ma batterie de tests histoire de pallier toutes les situations auxquelles un utilisateur lambda peut être confronté. Le code que je livre est en en CSS3 et XHTML 1.1 valides.

Tout s’affiche impeccablement dans tous les navigateurs. Je me dis que c’est une affaire qui roule lorsque le client m’envoie quelques emails pour me demander quelques corrections, additions, et l’intégration du script dans son site.

C’est là que le vent a commencé à tourner.

Spelling error report

The following text will be sent to our editors: