Skip to content
Gallery
Webflow Code SheatCheet
Typographie
Ancre & Scroll
CSS effects
Images / Vidéos / SVG
Responsive
Formulaires
Javascript
Autre
Une question ? (FAQ)
Search and Highlight
List item bullet point changement
Ordering Nested Collection list (croissant)
Alternating cms item flex gauche droite
foodles code
Scroll mobile menu
Utiliser le Tabs de Webflow en hover :
More
Share
Explore

icon picker
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
<script>
$('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)
or
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
<script>
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
<script>
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
});
});
</script>

Detecter si on est sur un mobile
function isdeviceTouchFriendly() {
var isMobile = false;
if (navigator !== null || navigator !== undefined) { }
if ("maxTouchPoints" in navigator) {
isMobile = navigator.maxTouchPoints > 0;
}
else if ("msMaxTouchPoints" in navigator) {
if (navigator !== null) {
isMobile = navigator.msMaxTouchPoints > 0;
}
}
else {
var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
if (mQ && mQ.media === "(pointer:coarse)") {
isMobile = !!mQ.matches;
}
else if ('orientation' in window) {
isMobile = true; // deprecated, but good fallback
}
else {
// Only as a last resort, fall back to user agent sniffing
var UA = navigator.userAgent;
isMobile = (/\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
/\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA));
}
}
return isMobile;
}
var isMobile = isdeviceTouchFriendly()

Activer une tab au hover seulement sur desktop
// mini function qui prend en param ta query et qui te retourne un objet
const els = (query) => Array.from(document.querySelectorAll(query))
if(!isMobile) {
els('.tab-link').forEach(tab => {
tab.addEventListener("mouseenter", () => {
tab.click()
})
})
}

Ordering nested collection list webflow
const activitys = Array.from(document.querySelectorAll(".item-activity"))
const wrapper = document.querySelector('.list-activity')

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.