Tous les articles sur la thématique "JavaScript"

Une personne portant un t shirt orange est assise, penchée sur un ordinateur portable, les mains tenant sa tête en signe de frustration, probablement après avoir reçu des courriels de l'Éducation Nationale dont elle souhaite se désabonner. Une tasse turquoise et des écouteurs blancs sont posés sur la table à côté d'eux, sur un fond uni et clair.

Se désabonner des listes syndicales de l’Éducation Nationale

by · Lecture: 5 minutes

La communication dans l’Éducation Nationale est devenue un véritable défi pour les enseignants. Notre messagerie académique, autrefois outil professionnel essentiel, se trouve aujourd’hui submergée par un flot incessant de messages syndicaux, dont la pertinence est parfois discutable. Cette situation, loin d’être anodine, contribue à une surcharge informationnelle préoccupante.

La multiplication des canaux de communication

La messagerie académique n’est plus le seul vecteur d’information pour les professeurs. L’Environnement Numérique de Travail (ENT) et Pronote sont venus s’ajouter à l’arsenal communicationnel, offrant des fonctionnalités telles que la messagerie interne, les discussions et les chats. Cette diversification des canaux, bien qu’elle puisse sembler pratique à première vue, engendre en réalité une charge mentale considérable pour les enseignants.

L’impact sur le quotidien des enseignants

La gestion de multiples plateformes de communication nécessite un temps et une énergie non négligeables. Les enseignants se retrouvent contraints de jongler entre différents systèmes, chacun avec ses propres notifications et interfaces. Cette fragmentation de l’attention peut nuire à la concentration et à l’efficacité dans les tâches pédagogiques essentielles.

La surcharge informationnelle

L’afflux constant de messages, qu’ils soient syndicaux, administratifs ou pédagogiques, crée un bruit de fond informationnel difficile à gérer. Les informations importantes risquent de se perdre dans cette masse, rendant ardu le tri entre l’essentiel et le superflu. Cette surcharge peut mener à un sentiment de submersion et de stress chez les professeurs.

La nécessité de réduire le flux d’informations

Face à cette situation, il devient crucial de mettre en place des stratégies pour réduire le nombre de messages reçus. Une approche efficace consiste à se désabonner des listes syndicales jugées moins pertinentes pour sa pratique professionnelle. Cette démarche permet non seulement de diminuer le volume de courriels, mais aussi de recentrer son attention sur les informations véritablement utiles.

Le défi du désabonnement manuel

Jusqu’à présent, se désabonner des listes syndicales pouvait s’avérer fastidieux. Le processus impliquait de se rendre sur une page dédiée et de décocher manuellement chaque liste, une par une. Pour de nombreux enseignants, cette tâche chronophage s’ajoutait à une liste déjà longue de responsabilités administratives.

Lire la suite

sandy tropical beach with sea waves foot steps shore footprints sand sunset 265223 8371

Ajouter des notes de bas de page élégantes et sémantiques

by · Lecture: 5 minutes

Je vous ai déjà fait un petit tutoriel pour créer des notes de bas de page (footnotes en anglais) juste en utilisant CSS.

Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.

Des notes de bas de page sémantiques

Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.

Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.

Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.

Exemple de notes de bas de page

Le dernier serveur de SkyMinds s’appelle Apollo
1
Il a été mis en service le 1er octobre 2023.
et tourne sous Ubuntu Server.
Il est facile de changer le MOTD
2
Cela est même recommandé car cela permet d’identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l’on entre une commande.
et apporter de nouvelles informations aux utilisateurs SSH.
Mon mémoire professionnel a été publié récemment
3
Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais () Institut Universitaire de Formation des Maîtres (IUFM). Mémoire:
, ce que j’aurais dû faire bien plus tôt.

Lire la suite

viewport overflow

Vanilla JS : identifier l’élément plus large que le viewport

by · Lecture: 2 minutes

Aujourd’hui, je régle un petit souci d’affichage sur un une boutique WooCommerce propulsée par Astra.

Le problème est le suivant: lorsqu’on visite le site depuis un mobile, il est possible de faire bouger le contenu de la page vers la gauche, ce qui dévoile une hideuse colonne grise/verte sur le côté droit. Pourtant, aucun élément ne semble dépasser la largeur du contenu.

L’identification de l’élément causant ce défaut d’affichage n’est pas vraiment une chose aisée, car visuellement, on ne distingue rien qui dépasse.

Vanilla JS à la rescousse

Voici un petit script en Vanilla JS qui permet de trouver l’élément qui dépasse la largeur du viewport de votre page:

/**
 * Identify elements that exceed the viewport width
 * by Matt Biscay
 * https://www.skyminds.net/?p=614036
 */
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.offsetWidth > document.documentElement.clientWidth) {
      console.log('Element causing overflow: ', element);
    }
  });
});Code language: JavaScript (javascript)

CSS: couvrez cet overflow que je ne saurais voir

Une fois votre ou vos éléments identifiés, il ne vous reste plus qu’à cacher son overflow-x :

#element {
  overflow-x: hidden;
}Code language: CSS (css)

Rafraîchissez la page. Hop, problème résolu.

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

JavaScript: sélectionner et désélectionner toutes les cases à cocher d’un coup

by · Lecture: 2 minutes

Il nous arrive souvent d’avoir toutes les cases (checkboxes) d’un formulaire ou d’un tableau à cocher.

Parfois, la fonctionnalité Sélectionnez tout / Désélectionner tout n’est pas implémentée donc voici comment faire, à l’aide de JavaScript.

Cocher toutes les cases

Supposons que toutes les cases à cocher de notre tableau se nomment post[], voici comment cocher toutes les cases, en utilisant vanilla JS :

var ele=document.getElementsByName('post[]');  
for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
}  Code language: JavaScript (javascript)

Décocher toutes les cases

Inversement, on peut modifier le code précédent avec checked=false si l’on souhaite décocher toutes les cases:

var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }Code language: JavaScript (javascript)

Fonction et bouton : Sélectionner tout

Maintenant, voyons comment nous pouvons intégrer notre code dans une fonction, que nous pourrons associer à un bouton “Sélectionner tout”:

function SelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
  }  
}  Code language: JavaScript (javascript)

Et notre bouton pourra être intégré comme ceci:

<input type="button" onclick='SelectAll()' value="Select All"/>  Code language: HTML, XML (xml)

Fonction et bouton : Désélectionner tout

Et le pendant: la fonction et le bouton qui permettent de désélectionner toutes les cases à cocher:

function deSelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }  
}      Code language: JavaScript (javascript)

Et voici le code HTML du bouton:

<input type="button" onclick='deSelectAll()' value="Deselect All"/>  Code language: HTML, XML (xml)

J’utilise souvent le premier bout de code sans les fonctions, ni le HTML (sauf si je développe une page d’options particulière), directement dans la console JavaScript du navigateur. C’est un gain de temps considérable sur certaines pages.

Bonnes sélections!

Vanilla JS : créer des éléments aux couleurs aléatoires photo

Vanilla JS : créer des éléments aux couleurs aléatoires

by · Lecture: 3 minutes

On a souvent besoin de distinguer des éléments rapidement et c’est très simple de le faire visuellement, avec des couleurs, pour bien différencier les blocs.

Voici une solution simple et élégante pour créer des éléments aux couleurs aléatoires, en utilisant du javascript natif, que l’on appelle Vanilla JS.

Cela devrait vous permettre d’obtenir ceci – des blocs dont la couleur est générée aléatoirement et qui change à chaque rafraichissement de la page.

J’inclus ici un bouton qui permet de rafraîchir aléatoirement les couleurs de notre bloc:

  • Color 1
  • Color 2
  • Color 3
  • Color 4
  • Color 5
  • Color 6

Lire la suite

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

JavaScript : tester si un paramètre existe dans une URL

by · Lecture: 1 minute

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=yesCode language: JavaScript (javascript)

URLSearchParams() à la rescousse

Il est très simple de récupérer les variables $_GET avec PHP mais avec JavaScript, nous allons utiliser la classe URLSearchParams pour faire cela proprement.

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

let searchParams = new URLSearchParams(window.location.search);Code language: JavaScript (javascript)

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

searchParams.has('preview'); // returns trueCode language: JavaScript (javascript)

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

let param = searchParams.get('sent');
param; // echoes 'yes'Code language: JavaScript (javascript)

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 1

jQuery : comment ajouter !important à une propriété CSS

by · Lecture: 2 minutes

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');Code language: JavaScript (javascript)

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

jQuery('.foo').css('border', '4px #000 solid');Code language: JavaScript (javascript)

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');Code language: JavaScript (javascript)

et on ajoute le code CSS suivant:

.border-black{
    border: 4px #000 solid !important;
}Code language: CSS (css)

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;' });Code language: JavaScript (javascript)

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');Code language: JavaScript (javascript)

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' );
});Code language: JavaScript (javascript)

Have fun!

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

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

by · Lecture: 2 minutes

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_')Code language: JavaScript (javascript)

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" />Code language: HTML, XML (xml)

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')Code language: JavaScript (javascript)

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');Code language: JavaScript (javascript)

Et si l’on veut cibler les classes?

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

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

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

by · Lecture: 2 minutes

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) :

.centered {
    margin:0 auto;
    text-align:center;
}Code language: CSS (css)

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

<div id="example_div" class="centered"> </div>Code language: HTML, XML (xml)

Ainsi que le code JavaScript qui s’occupe du délai:

/*
|-----------------------------------------------------------------------
| Delayed DIV text in vanilla JavaScript by Matt 
| URL : https://www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns predefined text in a DIV after a delay.
|
*/
(function(){
   var element_id = 'example_div' ; /* name of div ID w/ delayed text */
   var delayed_text = "Ceci est un texte d'illustration pour tester l'affichage d'un bloc DIV après un délai défini."; 
   var time = 7; /* time in seconds until display */

setTimeout(function(){
document.getElementById(element_id).innerHTML = delayed_text;},time*1000);
})();Code language: JavaScript (javascript)

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.

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

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

by · Lecture: 8 minutes
jquery

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 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
Lire la suite
Replier

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
Lire la suite
Replier

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
Lire la suite
Replier

Le script

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>Code language: HTML, XML (xml)

Lire la suite

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

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

by · Lecture: 3 minutes
jquery

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().

Lire la suite

Un écran d'ordinateur avec un fond bleu et violet présentant le navigateur Opera.

Installer des scripts JavaScript utilisateur sous Opera

by · Lecture: 1 minute

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é –> Contenu –> Options JavaScript).

Dans la nouvelle fenêtre, cliquez sur le bouton Choose et sélectionnez le dossier qui contient les fichiers JS.

Lire la suite

Suivant →