$(".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