Skip to content

Instantly share code, notes, and snippets.

View SvSven's full-sized avatar
🦥

Sven van Steenis SvSven

🦥
  • Norway
  • 14:25 (UTC +02:00)
View GitHub Profile
@SvSven
SvSven / nextjs-loading-screen.js
Created September 30, 2019 15:49
Show/hide a loading screen, message or animation on client side routing in Next.js
import { useState, useEffect } from "react";
import Router from "next/router";
const Layout = props => {
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const updateLoadingStatus = () => setIsLoading(!isLoading);
Router.events.on("routeChangeStart", updateLoadingStatus);
@SvSven
SvSven / ga.js
Created December 11, 2018 13:19
Add google analytics custom events to mailto: and tel: (or other) links that do not have a class, ID or other identifiable attribute. Does require a parent element with an ID (or class) so YMMV
let links = document.querySelectorAll('#footer a');
const substr_href = "mailto:";
const substr_tel = "tel:";
for(let i = 0; i < links.length; i++) {
let link = links[i];
if(link.href.indexOf(substr_href) !== -1 || link.href.indexOf(substr_tel !== -1)) {
link.addEventListener('click', function() {
@SvSven
SvSven / querySelectorAll-addEventListener.js
Created July 2, 2018 11:00
add an eventlistener to a group of elements using querySelectorAll
var btns = document.querySelectorAll('.btn');
for(var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
// Do stuff
});
}
@SvSven
SvSven / stickyfooter.css
Created January 26, 2018 22:10
Push the footer to always be at the bottom of the page, regardless of content, using flexbox
* {
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
width: 100%;
margin: 0;
dataLayer.push({
'Dimension1': 'Value1', // Custom dimensions
'Dimension2': 'Value2',
'ecommerce': { // Google Analytics Enhanced Ecommerce object
'purchase': {
'actionField': {
'id': 'XYZ123', // Transaction ID
'revenue': '30.00', // Total purchase revenue
'tax': '2.00'
},
@SvSven
SvSven / jQueryScrollTo.js
Created June 6, 2017 11:51
Generic jQuery function for animated anchor scrolling
$(".nav-link").click(function(){
var el = $(this).attr("href");
$("html, body").animate({
scrollTop: $(el).offset().top
}, 700);
return false;
});
function getCookie(name) {
const cookie = document.cookie.match(new RegExp(name + '=([^;]+)'));
return (cookie != null) ? cookie[1] : null;
}
@SvSven
SvSven / getURLParams.js
Created December 2, 2016 13:22
JS function to get and parse URL parameters
// Returns an object with all URL parameters, or error message if none are found
function getURLParams() {
if(!window.location.search) { return "No URL parameters found."; }
var paramsArr = window.location.search.substr(1).split("&"),
params = {};
paramsArr.forEach(function(e) {
var a = e.split("=");
params[a[0]] = a[1];