Webflow Code SheatCheet

Explore

Javascript

Redirection Langue Localisation utilisateur A mettre befor the body

$( document ).ready(function(){

var userLang = navigator.language || navigator.userLanguage;

if (userLang != “fr”) {

console.log(“allgood”)

window.location.href = “https://google.com”

}

});

</script>

Delay link page animation

$('a.class, a.class').click(function (e) {

e.preventDefault(); // prevent default anchor behavior

var goTo = this.getAttribute("href"); // store anchor href

setTimeout(function(){

window.location = goTo;

},1100);

});

(function(d) {

var config = {

kitId: 'vqw1kwc',

scriptTimeout: 1100,

async: true

h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

})(document);

</script>

Formulation d’une fonction abrégé

const function els(query) {const elements = document.querySelectorAll(query)}

const els = (query) => document.querySelectorAll(query)

const el = (query) => document.querySelector(query)

to use

els(.class) //retourne tous les éléments de cette classe

Le mot fonction est remplacé par => et se retrouve juste avant le document.qu....

le paramêtre (query) est la pour être remplacé par ce que l’on veux lors de l’éxecution de la fonction donc lorsuqe l’on tapera els(#superid) cela reviendra à fonction(inserer ici l’élément qui deviendra query) du coup cette fonction els peut être applé comme un $ en Jquery

Le .forEach placé derière une fonction qui sera appeler ex:

el(.class).forEach(nomdelafonction => { action }

document.querySelectorAll() retourne un tableau d’element HTML (mais c’est pas vraiment un tableau comme on l’entend)

donc je le transforme en un vrai tableau grace à la method Array.from()

ensuite je retourne le resultat

Add Event Listener

Ecouter un clique et change le text d’un élément

var txtMenu = document.getElementById('txt-nav-link-menu-txt')

var btnHamburger = document.getElementById('navigation-hamburger')

function changeText () {

if (txtMenu.innerHTML === 'Menu') {

txtMenu.innerHTML = 'Fermer';}

else {

txtMenu.innerHTML = 'Menu';

console.log('changig to menu');}}

if (btnHamburger) {

btnHamburger.addEventListener('click', changeText)}

</script>

Lancer un switch automatique de tab

var Webflow = Webflow || [];

Webflow.push(function () {

// DOMready has fired

// May now use jQuery and Webflow api

// start everything

var tabTimeout;

clearTimeout(tabTimeout);

tabLoop();

// define loop - cycle through all tabs

function tabLoop() {

tabTimeout = setTimeout(function() {

var $next = $('.tabs-menu').children('.w--current:first').next();

if($next.length) {

$next.click(); // click resets timeout, so no need for interval

} else {

$('.tab-link:first').click();

}

}, 4000); // 4 second tab loop

}

// reset timeout if a tab is clicked

$('.tabs-menu').click(function() {

clearTimeout(tabTimeout);

tabLoop(); //if on click loop continue

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.