How do I normalize the CSS3 transition end events across browsers?

There’s a technique used in Modernizr, improved: function transitionEndEventName () { var i, undefined, el = document.createElement(‘div’), transitions = { ‘transition’:’transitionend’, ‘OTransition’:’otransitionend’, // oTransitionEnd in very old Opera ‘MozTransition’:’transitionend’, ‘WebkitTransition’:’webkitTransitionEnd’ }; for (i in transitions) { if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) { return transitions[i]; } } //TODO: throw ‘TransitionEnd event is not supported in …

Read more

Javascript get object key name

This might be better understood if you modified the wording up a bit: var buttons = { foo: ‘bar’, fiz: ‘buz’ }; for ( var property in buttons ) { console.log( property ); // Outputs: foo, fiz or fiz, foo } Note here that you’re iterating over the properties of the object, using property as …

Read more

Converting json results to a date [duplicate]

You need to extract the number from the string, and pass it into the Date constructor: var x = [{ “id”: 1, “start”: “\/Date(1238540400000)\/” }, { “id”: 2, “start”: “\/Date(1238626800000)\/” }]; var myDate = new Date(x[0].start.match(/\d+/)[0] * 1); The parts are: x[0].start – get the string from the JSON x[0].start.match(/\d+/)[0] – extract the numeric part …

Read more

Add SVG element to existing SVG using DOM

If you want to create an HTML element, use document.createElement function. SVG uses namespace, that’s why you have to use document.createElementNS function. var svg = document.getElementsByTagName(‘svg’)[0]; //Get svg element var newElement = document.createElementNS(“http://www.w3.org/2000/svg”, ‘path’); //Create a path in SVG’s namespace newElement.setAttribute(“d”,”M 0 0 L 10 10″); //Set path’s data newElement.style.stroke = “#000”; //Set stroke colour …

Read more

How to loop through selected elements with document.querySelectorAll

My favorite is using spread syntax to convert the NodeList to an array and then use forEach for looping. var div_list = document.querySelectorAll(‘div’); // returns NodeList var div_array = […div_list]; // converts NodeList to Array div_array.forEach(div => { // do something awesome with each div }); I code in ES2015 and use Babel.js, so there …

Read more