Javascript


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

const newArrActivitys = activitys.sort((a, b) => {
const n1 = a.querySelector('.sorting-number-hidden').innerText
const n2 = b.querySelector('.sorting-number-hidden').innerText

return +n1 - +n2
})

wrapper.innerHTML = ""

newArrActivitys.forEach(function (act) {
wrapper.appendChild(act)
})

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.