Skip to content

Instantly share code, notes, and snippets.

@Quinten
Quinten / mouse-direction-cancel-hovers.js
Created August 17, 2021 13:48
Detect mouse direction and cancel hovers
// depends on modernizr and jquery
if ($('html').hasClass('no-touchevents')) {
var hoverDelay = 17;
var hoverTimeouts = [];
var hoverDelayTO = 0;
function processHoverTimeouts () {
hoverTimeouts.forEach(function (timeout) {
timeout();
});
hoverTimeouts = [];
@Quinten
Quinten / UploadJsonAndProcessInBrowser.js
Created May 11, 2017 12:17
Create an upload button and process file as json object (locally in the browser)
var uploadButton = $('<input type="file">');
uploadButton.change(function() {
var reader = new FileReader();
reader.onload = function (e) {
var target = e.target;
var data = JSON.parse(target.result);
console.log(data);
}
reader.readAsText(uploadButton[0].files[0]);
});
@Quinten
Quinten / downloadDataAsJSON.js
Created May 11, 2017 12:11
Download any javascript object as json file
var data = {test: 'test'};
var dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(JSON.stringify(data));
var link = document.createElement("a");
link.download = 'export.json';
link.href = dataUri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
@Quinten
Quinten / price or real world number regex
Created January 6, 2017 14:36
price or real world number regex
var priceRegex = /^((((([1-9]\d{0,2})(,\d{3})?)|([1-9]\d*)|\d{1})(\.\d+){0,1})|(((([1-9]\d{0,2})(\.\d{3})?)|([1-9]\d*)|\d{1})(,\d+){0,1}))$/;
@Quinten
Quinten / onElementResize.js
Created February 16, 2016 09:03
javascript trigger on element resize
var onElementResize = function(element, callback) {
if (!onElementResize.watchedElementData) {
onElementResize.watchedElementData = [];
var checkForChanges = function() {
onElementResize.watchedElementData.forEach(function(data) {
if (element.offsetWidth !== data.offsetWidth ||
element.offsetHeight !== data.offsetHeight) {
@Quinten
Quinten / _rwd-table.scss
Created February 10, 2016 10:35
A table that switches to a vertical layout on mobile
@include breakpoint(max-width, $bp-medium) {
table.rwd-table {
display: block;
thead {
display: none;
tr, th {
display: none;
@Quinten
Quinten / overflow-scroll.scss
Last active February 10, 2016 09:45
a wrapper for a table that results in a smooth scroll overflowing container for tables that are to wide on mobile
.scroll-table-wrapper {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
-webkit-appearance: none;
}
&::-webkit-scrollbar:vertical {
width: 11px;
@Quinten
Quinten / centered-product-image.scss
Created February 8, 2016 13:20
Centered in a square regardless of width
.product-image {
height: 0;
display: block;
position: relative;
z-index: 1;
overflow: hidden;
padding-bottom: 100%;
img {
display: block;
@Quinten
Quinten / stickyfooter-flexbox.css
Created January 28, 2016 09:29
Sticky footer with flexbox
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
@Quinten
Quinten / fun-with-visual-selections-in-vim.md
Last active January 6, 2016 12:50
fun with visual selections in vim (on mac)

fun with visual selections in vim (on mac)

Math

In insert mode type some math like 2+2

Then switch to visual mode and select it.

With visual mode still active type !bc