c-kick

const stickes = document.body.querySelectorAll('.position-sticky');

window.addEventListener('scroll', function(){
  stickes.forEach(function(el){
    el.classList.toggle('stuck', el.getBoundingClientRect().top === parseInt(window.getComputedStyle(el).top, 10));
  });
});

c-kick

/** This script adds the current breakpoint-name (as specified in the 'breakpoints' const)
 * to the body class and notifies anyone listening of the change via the 'breakPointChanged' event.
 *
 * Default breakpoint names and cutoff pixel values taken from Bootstrap 5's default responsive breakpoints:
 * https://getbootstrap.com/docs/5.0/layout/breakpoints/
 *
 * Usage:
 * - include the script into your page and the class is updated, and will continue to update whenever
 *   the width of the window changes enough to trigger another breakpoint.
 * - optionally listen for the event via:

c-kick

/**
 * CSP Generator v0.2 (C) 2020-10-12 hnldesign.nl / Klaas Leussink
 * @param array $rules
 * Rules, specified as an array with rulesets (array) or rules (string). Note that 'hosts' are specified as an array inside the ruleset:
 * note: it's easier to define hosts in the $domains array (see second param)
 * array(
 *  'default-src' => array (
 *      'self',
 *      'data',
 *      'unsafe-eval',

c-kick

/**
 * JavaScript function prototype debouncer 4.2 - 2010-2021 hnldesign.nl - Klaas Leussink
 * Demo: https://code.hnldesign.nl/demo/hnl.debounce.html
 *
 * Based on code by Paul Irish and the original debouncing function from John Hann
 * http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
 * Register deBouncer as a function prototype.
 *
 * All debounced variants of the function (depending on the supplied debouncing parameters (see below)
 * are stored inside a 'dbObj' Object inside the debounced function.

c-kick

$(document).on('click', '#MyDoubleClickElement', function () {
  var t = $(this), doubleClickInterval = 500; //set up base vars
  var lastTouch = t.data('lastTouch') || 0, time = new Date().getTime(); //check when this element has been clicked last
  t.data('lastTouch', time); //store this click time
  if (time - lastTouch < doubleClickInterval && lastTouch !== 0) { //check if time between this and previous click exceeds the threshhold. If there is no last click registered, don't handle the callback
    //do your stuff here (execute a callback)
    alert("Double click!");
  }
});

c-kick

$.fn.checkStuck = function (className) {
    $(this).each(function() {
        var t = $(this); //preselect
        t.toggleClass(className, (parseInt(t.css('top'), 10) === t[0].getBoundingClientRect().top));
    });
}

c-kick

/**
 *
 *
 * DEPRECATED, SEE NEW VERSION AT https://gist.github.com/c-kick/d359fce36257cf4c9fb5ea5f2c0033b6
 *
 *
 * JavaScript function prototype debouncer 3.0 - hnldesign.nl
 * Based on code by Paul Irish and the original debouncing function from John Hann
 * http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
 * Register deBouncer as a function prototype.

c-kick

/*!
 * PRIME - Progressive-Responsive Image Enabler - v2.2.10 - 8/10/2020
 * http://code.hnldesign.nl/demo/hnl.prime.html
 *
 * Copyright (c) 2014-2020 HN Leussink
 * Dual licensed under the MIT and GPL licenses.
 *
 * Example: http://code.hnldesign.nl/demo/hnl.prime.html
 *
 * Feature notes:

c-kick

/*!
 *
 * NEW VERSION AT https://github.com/c-kick/mobileConsole
 *
 * hnl.mobileConsole - javascript mobile console - v1.3.8 - 04/01/2021
 * Adds html console to webpage. Especially useful for debugging JS on mobile devices.
 * Supports 'log', 'trace', 'info', 'warn', 'error', 'group', 'groupEnd', 'table', 'assert', 'clear'
 * Inspired by code by Jakub Fiala (https://gist.github.com/jakubfiala/8fe3461ab6508f46003d)
 * Licensed under the MIT license
 *

c-kick

$.fn.isVisible = function() {
    // Am I visible?
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such.
    // That is why either width or height have to be > 0.
    var rect = this[0].getBoundingClientRect();
    return (
        (rect.height > 0 || rect.width > 0) &&
        rect.bottom > 0 &&
        rect.right > 0 &&