viewport overflow

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

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);
    }
  });
});

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;
}

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

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;  
}  

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;  
  }

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;  
  }  
}  

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

<input type="button" onclick='SelectAll()' value="Select All"/>  

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;  
  }  
}      

Et voici le code HTML du bouton:

<input type="button" onclick='deSelectAll()' value="Deselect All"/>  

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

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

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

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

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 true

3. On vérifie maintenant si preview est é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 1

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

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!

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

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

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;
}

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

<div id="example_div" class="centered"> </div>

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);
})();

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

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

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 :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>

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

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

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

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

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

academie creteil logo

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 aux sites sus-cités. Et là, paf!, un message d’erreur que je ne peux m’empêcher de partager ici avec vous :

creteil navigateurs

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.

Lire la suite

Modifier n'importe quelle page web avec votre navigateur photo 1

Modifier n’importe quelle page web avec votre navigateur

html logo

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