JavaScript – get absolute position from top or left of document (x, y)

This should probably not be as complicated as it is, but obviously: JavaScript. Anyway, there are 2 basic approaches. You may see offsetTop and offsetLeft used in examples in blogs and on stack. This is great in a garden path setup, but only gives the distance between the element and it’s nearest “offsetParent” (which is […]

JavaScript – find next node in dom

function next(node, skip) { if (node == null) { return null; } if (!skip && node.firstChild) { return node.firstChild; } if (node.nextSibling) { return node.nextSibling; } return next(node.parentNode, true); }

JavaScript – simple Array difference

var difference = function(compare){ return Array.from(arguments).reduce(function(previous, current){ return previous.filter(function(element){ return current.indexOf(element) == -1; }); }); }; POC: http://codepen.io/moagrius/pen/oxxMXL

JavaScript – simple Array intersection

var intersection = function(){ return Array.from(arguments).reduce(function(previous, current){ return previous.filter(function(element){ return current.indexOf(element) > -1; }); }); }; POC https://jsfiddle.net/2uwhqccc/

JavaScript – get caret position in contentEditable

The Range instance returned by various Selection methods – most commonly sindow.getSelection().getRangeAt(0) – does not provide enough information to determine the total offset of the caret (or selection start/end). Here’s how: var SelectionUtils = {}; /** * Returns an object with 2 properties: a boolean value indicating if #child was found in the currently iterating […]

JavaScript – strip comments from JavaScript

Since the online comment-strippers I found didn’t work for the most part, here’s a little working POC of https://github.com/moagrius/stripcomments that _should_ work on any valid JS input. Paste the JS into the textarea and click the button – the textarea’s value will be updated with the stripped version of the script you pasted. Strip Comments

JavaScript – classList polyfill

So in searching for a good polyfill for Element.classList, I found 2 promising versions: 1. https://github.com/eligrey/classList.js/blob/master/classList.js, which is on MDN as a “suggested” polyfill: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList. This definitely works, but IMO is a little inelegantly written and might be hard to follow. 2. https://github.com/remy/polyfills/blob/master/classList.js, which is nice and clean, but the contains method is broken (I […]

JavaScript – simple implementation of EventTarget

From the EventTarget interface described here: https://developer.mozilla.org/en-US/docs/Web/API/Event/target /UPDATE 04/21/16 – this had a bug in the first line of dispatchEvent – updated now. var EventTarget = function(){ this.listeners = {}; }; EventTarget.prototype.listeners = null; EventTarget.prototype.addEventListener = function(type, callback){ if(!(type in this.listeners)) { this.listeners[type] = []; } this.listeners[type].push(callback); }; EventTarget.prototype.removeEventListener = function(type, callback){ if(!(type in this.listeners)) […]

JavaScript – initializing variables without default values

Assuming we’ve all read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var, still might be some surprises: console.log(bob); No surprise, throws an Error. var bob; console.lob(bob); No surprise, logs undefined (no error) console.log(bob); var bob; console.lob(bob); Surprise – *both* log undefined, no error is thrown, even on the first line before bob is “initialized”. var SomeClass = function(){}; SomeClass.prototype.name; var bob = […]

JavaScript – Simple Unique Array

FWIW, I remember reading this idea somewhere else, probably stack, so credit to whoever first figured this out. someArray.reduce(function(previous, current) { if(previous.indexOf(current) == -1){ previous.push(current); } return previous; }, []); POC: https://jsfiddle.net/moagrius/7tweemzo/