Skip to content

Instantly share code, notes, and snippets.

@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.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.collision.detection.js
Last active January 26, 2023 07:50
jQuery - Collision detection for absolute positioned elements
/*!
* 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 November 17, 2014 21:50
jQuery - Simulate Momentum Scrolling
/**
* 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 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.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)));
}