Fermer

Quelques petit bouts de code Javascript

Langage de programmation employé pour les pages web interactive ; il est vite devenu avec le temps incontournable ! Que ce soit je Javascript natif ou avec des bibliothèques telles que jQuery.

Javascript retirer des attributs

Sur un site WordPress, des attributs (srcset et sizes) sont ajouté sur des éléments de bannières. Et il me gêne pour avoir un rendu propre de mes images sur les téléphones. Un petit script Javascript pour retirer ces deux attributs en Javascript

document.addEventListener("DOMContentLoaded", function(event) {
    var cls = document.getElementsByTagName('figure');
    for(var i = 0; i < cls.length; i++) {
        dd = cls[i].getElementsByTagName('img');
        for(var j = 0; j < dd.length; j++) {
            dd[j].removeAttribute('srcset');
            dd[j].removeAttribute('sizes');
        }
    }
});

Javascript Menu Burger

Ajoute une classe active sur deux éléments HTML afin de gérer le hamburger. Premier clic sur le hamburger, la classe est ajoutée. Deuxième clic sur le hamburger, la classe est retirée. Javascript sans bibliothèque jQuery.

active = false;
var burger = document.querySelector(".burger");
var jeheader2 = document.querySelector(".menu-menu-header2-container");
var jeheader = document.querySelector(".menu-menu-header-container");
burger.onclick = function() {
    if (active) {
        jeheader2.classList.remove('active');
        jeheader.classList.remove('active');
        active = false;
    } else {
        jeheader2.classList.add('active');
        jeheader.classList.add('active');
        active = true;
    }
};

Javascript menu burger sur un onePage

Sur un site One Page, j’ai un menu burger pour aller à une partie de mon document HTML. Le problème est que lorsque le burger est affiché et que je clic sur une section, le menu burger ne se repliait pas. La function lance attends le clic sur un des éléments de menu (<a>) ; puis retire la classe active au burger pour le replier.

const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav');
burger.addEventListener('click', () => {
 burger.classList.toggle('active');
 nav.classList.toggle('active');
});

function lance() {
    const clicmenu = document.querySelectorAll('.nav ul li a');
    for (var i = 0; i < clicmenu.length; i++) {
        var self = clicmenu[i];
        self.addEventListener('click', function (event) {
            burger.classList.toggle('active');
            nav.classList.toggle('active');
        }, false);
    }
}
window.onload = lance;

Javascript préchargement images

Mon document HTML contient sur la balise <body> une classe loading. Cette classe permet d’afficher un petit image de chargement. En tâche de fond en Javascript, je sélectionne tous les éléments contenant la classe item__img afin de télécharger les (lourdes) images. Une fois le téléchargement de toutes les images terminés, je retire la classe loading du <body>.

{
    // Preload images
    const preloadImages = () => {
        return new Promise((resolve, reject) => {
            imagesLoaded(document.querySelectorAll('.item__img'), {background: true}, resolve);
        });
    };

    // And then..
    preloadImages().then(() => {
        // Remove the loader
        document.body.classList.remove('loading');
    });
}

Javascript attendre la fin du chargement du document HTML

Pour lancer divers scripts, il me fallait attendre que le fichier HTML soit entièrement chargé pour lancer des fonctionnalités. Ceci se fait facilement avec la bibliothèque jQuery.

;(function($){
	function lance() {
		// lance les scripts
	}

	$(function(){ // on DOM load
		lance()
	})

}(jQuery));

Javascript pour afficher un élément après le scroll dans la page

Sur un site très long, j’attends que mon internaute scrolle un peu dans la page avant de faire apparaître l’élément #button

$(document).ready(function () {
 var btn = $('#button');
 $(window).on('scroll', function () {
     if ($(window).scrollTop() > 500) {
         btn.addClass('show');
     } else {
         btn.removeClass('show');
     }
 });
});

Javascript pour remonter en haut de page progressivement

Sur un site très long, j’ai un bouton pour remontrer en haut de page. J’écoute le clic sur l

e bouton qui a la classe click ; afin d’utiliser la function animate pour remonter en haut de page.

$(document).ready(function () {
    btn.on('click', function (e) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, '500');
    });
});

2 réponses à “Quelques petit bouts de code Javascript

  1. Hello Régis,

    Merci pour ce partage !!
    Toujours utile et efficace ! (suis en formation JS toute la semaine, hé bien la transmission du savoir ce n’est pas donné à tout le monde….)

    A +

Laisser une réponse

Votre adresse email ne sera pas publiée. Les champs obligatoires sont indiqués par *