Skip to content

Instantly share code, notes, and snippets.

Avatar

Klaas Leussink c-kick

View GitHub Profile
@c-kick
c-kick / hnl.doubleClickTap.js
Created Oct 14, 2020
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.
View hnl.doubleClickTap.js
$(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.checkStuck.js
Created Oct 14, 2020
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.
View hnl.checkStuck.js
$.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.debounce.v3.js
Last active Feb 4, 2020
JavaScript function prototype debouncer v3.0 - debounces functions that are prone to repetitive calling (on events such as mousewheel, orientationchange, resize, etc)
View hnl.debounce.v3.js
/**
* 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.
*
* Usage:
* window.addEventListener('onorientationchange', myFunction.deBounce(100, false, false), false);
* or
* myFunction.deBounce(100, true, true)(myEventData);
@c-kick
c-kick / hnl.prime.js
Last active Oct 14, 2020
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/
View hnl.prime.js
/*!
* 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.mobileConsole.js
Last active Aug 30, 2020
hnl.mobileConsole.js - extends JavaScript's console to display a visual console inside the webpage. Very usefull for debugging JS on mobile devices with no real console. Info and demo: http://www.hnldesign.nl/work/code/mobileconsole-javascript-console-for-mobile-devices/
View hnl.mobileConsole.js
/*!
* hnl.mobileConsole - javascript mobile console - v1.3.6 - 7/1/2020
* 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
*
* Original author: @hnldesign
* Further changes, comments: @hnldesign
* Copyright (c) 2014-2019 HN Leussink
@c-kick
c-kick / hnl.isVisible.js
Last active Apr 23, 2018
hnl.isVisible.js - jquery extension to check if an element is visible in the browser's viewport, demo: http://jsfiddle.net/49oownx6/111/
View hnl.isVisible.js
$.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.debounce.js
Created Nov 17, 2014
jQuery - Debounce events
View hnl.debounce.js
var deBouncer = function($,cf,of, interval){
// deBouncer by hnldesign.nl
// more info: http://www.hnldesign.nl/work/code/debouncing-events-with-jquery/
//
// 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/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
@c-kick
c-kick / hnl.taphover.js
Last active Sep 16, 2020
jQuery - Mouse hover on touch devices
View hnl.taphover.js
//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.collision.detection.js
Last active Nov 12, 2019
jQuery - Collision detection for absolute positioned elements
View hnl.collision.detection.js
/*!
* jQuery Collision Detection - v1.0 - 1/7/2014
* http://www.hnldesign.nl/work/code/collision-prevention-using-jquery/
*
* Copyright (c) 2014 HN Leussink
* Dual licensed under the MIT and GPL licenses.
*
* Example: http://code.hnldesign.nl/demo/hnl.collision.detection.html
*/
@c-kick
c-kick / hnl.inertial.js
Created Nov 17, 2014
jQuery - Simulate Momentum Scrolling
View hnl.inertial.js
/**
* jQuery inertial Scroller v1.5
* (c)2013 hnldesign.nl
* This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
*
* More information: http://www.hnldesign.nl/work/code/momentum-scrolling-using-jquery/
*/
/*jslint browser: true*/
/*global $, jQuery*/
You can’t perform that action at this time.