Helpful Scripts

setTimeout

Runs code after 1.5 seconds

setTimeout(() => {  
    // do something
}, 1500);

---

setInterval

Do something every 1.5 seconds

setInterval(function () {
    // do something
}, 1500);

---

Webflow Ready

Run code only after Webflow is ready. Useful for running code after Webflow sliders, tabs, or similar components have been created.

Webflow.push(function () {
  console.log("Webflow ready");
});

---

Set cursor div to follow mouse position

let cursor = $(".cursor-div").css({ position: "fixed", top: "0", left: "0", zIndex: "2000" });
$(document).on("mousemove", function (e) {
  let xPosition = e.pageX;
  let yPosition = e.pageY - window.scrollY;
  cursor.css("transform", `translate(${xPosition}px, ${yPosition}px)`);
});

---

When typing on a form field, set a text element to match field value

$(".my-form-field").on("input", function () {
  let fieldValue = $(this).val();
  $(".my-text-element").text(fieldValue);
});

---

Do something on key press

$(document).on('keydown', function(e) {
    if (e.key === "Escape") {
        console.log("Escape key pressed");
    }
});

---

Create a press and hold interaction

$(".your-button").on("mousedown touchstart", function() {
    console.log("Mousedown or touchstart event triggered");
});

$(".your-button").on("mouseup touchend", function() {
    console.log("Mouseup or touchend event triggered");
});

---

Copy to clipboard

HTML

<button data-copy-text="This text will be copied on button click"></button>

jQuery

$("[data-copy-text]").on("click", function () {
  let textToCopy = $(this).attr("data-copy-text");
  let input = $("<input>").appendTo($(this));
  input.val(textToCopy).select();
  document.execCommand("copy");
  input.remove();
});

---

Add a 0 in front of any number that's less than 10

function numberWithZero(num) {
  if (num > 9) return num;
  return "0" + num;
}
let result = numberWithZero(8);

---

JavaScript matchMedia

Run JavaScript when switching between breakpoints

function checkBreakpoint(x) {
  if (x.matches) {
    // desktop code here
  } else {
    // tablet & below code here
  }
}
const matchMediaDesktop = window.matchMedia("(min-width: 992px)");
checkBreakpoint(matchMediaDesktop);
matchMediaDesktop.addListener(checkBreakpoint);

---

Scroll to element on link click

Scrolls to ".your-section" on click of ".your-link" over 1.5 seconds

$(".your-link").on("click", function () {
  $("html, body").animate({ scrollTop: $(".your-section").offset().top }, 1500);
});

---

Show one random item in your cms list

$(".your-cms-list").each(function (index) {
  let items = $(this).children();
  let randomNumber = Math.floor(Math.random() * items.length);
  items.hide().eq(randomNumber).show();
});

---

Add commas to number

function numberWithCommas(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
let yourNumber = numberWithCommas(5240);

---

Show a different div for each day of the week

Apply code to a list containing 7 divs. The first div should be for Sunday.

$(".your-list").each(function (index) {
  let currentDay = +new Date().getDay();
  let items = $(this).children();
  let currentItem = items.eq(currentDay);
  items.not(currentItem).remove();
});

---

Reload page on browser back button click

Reload page when hitting back button instead of pulling up cached version

window.onpageshow = function(event) {
    if (event.persisted) window.location.reload();
};

---

Run code on every page that hasn't been visited before

if (localStorage.getItem(window.location.href) === null) {
    // run code
}
localStorage.setItem(window.location.href, "visited");

---

localStorage & sessionStorage

// All these same options work with sessionStorage also

// gets the value of item
localStorage.getItem("Name");
// sets the value of item
localStorage.setItem("Name", "Value");
// removes item
localStorage.removeItem("Name");
// removes all local storage
localStorage.clear();

// Check if item has been set before
if (localStorage.getItem("Name") !== null) {
	// item is set
} else {
	// item is not set
}

// Check if item equals a certain value
if (localStorage.getItem("Name") === "Your Name") {
	// item matches
} else {
	// item does not match
}

---

Query Parameters

Example url: https://www.your-website.com/?username=John&hobby=Sports

// store params
const params = new URLSearchParams(window.location.search);

// check if the url contains a certain parameter
if (params.has("username")) {
	// run code
}

// check the value of a certain parameter
if (params.get("username") === "John") {
	// run code
}

---

Control videos

// get video
let video = $(".my-section").find("video");
// pause video
video[0].pause();
// play video
video[0].play();
// restart video
video[0].currentTime = 0;
// mute video
video.prop('muted', true);
// unmute video
video.prop('muted', false);
// enable loop
video.prop('loop', true);
// disable loop
video.prop('loop', false);
// on video end (loop must be disabled for this to run)
video.on('ended', function() {
    // run code
});
// on play
video.on('play', function() {
    // run code
});
// on pause
video.on('pause', function() {
    // run code
});
// on timeupdate
video.on('timeupdate', function() {
    $(".my-text").text(this.currentTime);
});
// on volumechange
video.on('volumechange', function() {
    $(".my-text").text(this.volume);
});

---

AJAX

On click of ".your-link", get ".item-on-next-page" and add it to current page.

$(".your-link").on("click", function (e) {
  e.preventDefault();
  let link = $(this).attr("href");
  $.ajax({
    url: link,
    success: function (response) {
      let element = $(response).find(".item-on-next-page");
      $("body").append(element);
    },
    complete: function () {
      console.log("Got It");
    }
  });
});

On page load, get item from certain page and bring it to current page

// include this code on 404 page to add cms navbar to 404 page
let link = window.location.origin; // homepage url
$.ajax({
  url: link,
  success: function (response) {
    let element = $(response).find(".your-navbar");
    $("body").prepend(element);
  },
  complete: function () {
    console.log("Got It");
  }
});

---

Insert text into field while triggering any events attached to that field

$(".my-field").val("").focus();
document.execCommand("insertText", false, "Field Text");