Skip to content

Instantly share code, notes, and snippets.

Klaas Leussink c-kick

View GitHub Profile
@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 Jul 1, 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.1.19 - 20/12/2019
* http://code.hnldesign.nl/demo/hnl.prime.html
*
* Copyright (c) 2014-2016 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 Jun 19, 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.5 - 19/4/2018
* 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-2016 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 Jun 27, 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', '.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*/
@c-kick
c-kick / hnl.atLeast.js
Created Nov 17, 2014
jQuery selector: At least x elements
View hnl.atLeast.js
//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.valBetween.js
Created Nov 17, 2014
Limit integer to a min and max
View hnl.valBetween.js
function valBetween($val, $min, $max) {
return (Math.min($max, Math.max($min, $val)));
}
You can’t perform that action at this time.