Skip to content
More
Share
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
<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)
})
Menu mobile Navigation Body overflow hidden add class
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.hamburger').forEach(trigger => {
trigger.addEventListener('click', function(){
this.x = ((this.x || 0) + 1)%2;
if(this.x){
document.querySelectorAll('.body').forEach(target => target.classList.add('overflow-hidden'));
}
else{
document.querySelectorAll('.body').forEach(target => target.classList.remove('overflow-hidden'));
}
});
});
});
</script>
JS il view
Transition de page -
<script>
$('.apply-transition').click(function (e) {
e.preventDefault();
// Class that has page out interaction tied to click
// Class that has page out interaction tied to click
$('.page-transition').click();
var goTo = this.getAttribute("href"); /* URL post-transition */
setTimeout(function(){
window.location = goTo;
},1000); /* Durée de la transition, en ms */
});
</script>
Récupérer les UTM et les injecter dans les formulaires de webflow
const urlParams = new URLSearchParams(window.location.search);
const utmParams = [
'utm_source',
'utm_medium',
'utm_campaign',
];
let paramValue, utmField;
utmParams.forEach(function (param) {
paramValue = urlParams.get(param);
utmField = document.querySelector("input[name='"+param+"']");
if (paramValue && utmField) {
utmField.value = paramValue.trim();
}
});
const setUtmInForm = (formId, utm)
utmField = document.querySelector("input[name='"+param+"']");
utmField.value = paramValue.trim();
});
const getUtmValue = (utm) => {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(utm);
}
const utmVal = getUtmValue('utm_gdtrtr");
1. Récupération des paramètres de l'URL :
javascript
Copier le code
const urlParams = new URLSearchParams(window.location.search);
2. Liste des paramètres UTM à chercher :
javascript
Copier le code
const utmParams = [
'utm_source',
'utm_medium',
'utm_campaign',
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.