Skip to content

Instantly share code, notes, and snippets.

@c-kick
c-kick / hnl.atLeast.js
Created November 17, 2014 21:46
jQuery selector: At least x elements
//count elements, return jQuery object if more than specified, else return empty object to 'stop' chaining
// usage: $('myElement').atLeast(2).fadeOut(); fadeOut will only execute on elements when 2 or more have been found
(function ($) {
"use strict";
$.fn.atLeast = function (count) {
if (this.length >= count) {
//return the objects
return this;
} else {
//return empty jquery object to 'break' the chain
@c-kick
c-kick / hnl.isVisible.js
Last active April 23, 2018 13:21
hnl.isVisible.js - jquery extension to check if an element is visible in the browser's viewport, demo: http://jsfiddle.net/49oownx6/111/
$.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 &&
@c-kick
c-kick / hnl.valBetween.js
Created November 17, 2014 21:43
Limit integer to a min and max
function valBetween($val, $min, $max) {
return (Math.min($max, Math.max($min, $val)));
}
@c-kick
c-kick / hnl.checkStuck.js
Created October 14, 2020 06:37
This small jQuery function checks if elements that are positioned as sticky (position: sticky;) are, in fact, in their ‘stuck’ position. It’s a very simple check where the script checks if the element’s position is equal to its ‘top’ CSS variable. If it is, it adds the class you specify (argument className), and if not, removes it.
$.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
c-kick / hnl.doubleClickTap.js
Created October 14, 2020 06:41
This jQuery script enables doubleclick and doubletap (mobile) behaviour, without the need for global variables. It does not rely on jQuery’s ‘dblclick’ handler, but needs to be binded to the regular ‘click’ event.
$(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
c-kick / hnl.prime.js
Last active October 14, 2020 06:42
Prime (progressive/responsive image enabler) is a JavaScript script I wrote, that allows for progressive and responsive image loading, potentially saving over 80% of a page's size and speed. See: http://www.hnldesign.nl/work/code/prime/
/*!
* 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
c-kick / hnl.debounce.v3.js
Last active November 23, 2020 23:30
JavaScript function prototype debouncer v3.0 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc)
/**
*
*
* 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
c-kick / csp-generator.php
Last active December 10, 2020 20:55
Generates a Content Security Policy using easy definable arrays. See code docs for example.
/**
* 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
c-kick / hnl.taphover.js
Last active January 19, 2021 23:00
jQuery - Mouse hover on touch devices
//26-5-2020 update: possibly shorter, and better, since 'click' now fires on a tap, and is not prevented by the previous script.
//Also: more concatenation.
$(document).on('touchstart, click', 'a.taphover', function (e) {
if (!$(this).hasClass('hover')) { e.preventDefault(); }
$('.taphover').not($(this).toggleClass('hover')).removeClass('hover');
});
//the previous version:
//taphover - a solution to the lack of hover on touch devices.
@c-kick
c-kick / hnl.setBreakpoints.js
Last active March 23, 2022 10:11
setBreakpoints - 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.
/** 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: