dropshado.ws

You can use event.currentTarget in place of this inside jQuery event handlers

$('.button').on( 'click', function( event ) { console.log( event.currentTarget === this ); // true });

WebKit/Blink has a bug where making a DOM change to video elements will pause the video. This can prevent or stop video autoplay. Arnaud Leyder has a solid explanation on Stack Overflow.

The hack fix is to re-trigger .play() on the video after the DOM change has been made.

// make DOM change to video elem.appendChild( video ); // trigger .play() to resume autoplay for WebKit video.play();

You can use padding-bottom as a way to set height of an element based on its parent width, so that it is proportional with its own width.

/* item sized as a square 1/3 size of container */ .item { width: 33.3%; padding-bottom: 33.3%; }

If you are using box-sizing: border-box and the element has border, you would expect that element to remain a perfect square.

.item { width: 33.3%; padding-bottom: 33.3%; border: 2px solid; }

But that's not the case. Because the height is faked with padding-bottom, it's not actually setting its height. Consequently, the height of the border is added on top of the padding-bottom height.

This can be resolved either by using outline instead of border, or using calc to account for the border size.

My loader spinner wasn't spinning.

.loader-spinner { animation: spinLoader 600ms steps(12, end) infinite; } @keyframes spinLoader { from { transform: translate( -50%, -50% ); } to { transform: translate( -50%, -50% ) rotate(1turn); } }

The problem was that the keyframes for transform need to match. Even though there's an implicit rotate(0turn) in the transform value, it's required to be explicit for animation keyframes.

@keyframes spinLoader { /* match transform values */ from { transform: translate( -50%, -50% ) rotate(0turn); } to { transform: translate( -50%, -50% ) rotate(1turn); } }

jQuery event namespaces allow you to separate event listeners.

// bind click listeners $element.on( 'click.alpha', function() { console.log('Alpha click'); }); $element.on( 'click.beta', function() { console.log('Beta click'); }); // unbind alpha click listener only $element.off('click.alpha');

EDIT The rest of this post is false I had thought I verified this, but alas, no. Triggering with a namespace will not trigger that event without the namespace.

They can also be used when triggering events, to specify where that event came from.

$element.trigger('click.pluginName')

I'm using namespace triggering in Flickity, as a way to distinguish Flickity's select event from the native select event.

Firefox has native .watch() method.

The watch() method watches for a property to be assigned a value and runs a function when that occurs.

Interestingly, it's special to Firefox.

Warning: Generally you should avoid using watch() and unwatch() when possible. These two methods are implemented only in Gecko, and they're intended primarily for debugging use.

I use ievms to browser test Internet Explorer. Every couple of months, the IE8 VM expires (This copy of Windows must be activated...). The only solution is to reinstall the VM. ievms maintainer xdissent also made iectrl, a command line tool to make stuff like this easier.

iectrl reinstall 8

To move all children from one element into another.

When an element is positioned partly outside the window AND that element does not have a width set, its text will wrap inside the window.

See the Pen absolute text wrap by David DeSandro (@desandro) on CodePen.

Jeremy Keith's Conditional CSS technique currently doesn't work in Chrome.

@media all and (min-width: 45em) { body:after { content: 'widescreen'; display: none; } }

The problem is with how Chrome will not generate pseudo elements when set to display: none.

My current solution/hack is to fallback to the head font-size code, as Opera now supports this.

@media screen and (min-width: 45em) { head { font-family: widescreen; } }

The white noise you hear in this Vine is the sound of my laptop fan whirling away at top speed. This animation is rendered in <canvas>, in Chrome. While the animation does have thousands of particles being rendered, I hadn't expected the top-speed fan.

I've been able to pinpoint its cause. The animation was using the width of an image, this.img.width, for every particle, every frame. Setting this value to a separate property this.imgWidth has slowed down the fan significantly. I speculate that this issue is similar to reflow triggers.

Firefox doesn't support canvas globalCompositeOperation darker. As it turns out, the darker composite value was removed from the canvas spec in 2007. See the globalCompositeOperation examples on MDN.

The closest solution is to use difference (which oddly enough isn't in the spec), which Firefox (currently v28) does support. But difference is different from darker. difference subtracts channel values, darker multiplies them. If you're using primary colors (#f00, #f0f, etc.) it may work.

IE10 supports neither.

See the Pen darker/difference canvas composite by David DeSandro (@desandro) on CodePen.

I'm looking to measure the width of an element with width: 66.666%, whose container is width: 300px. Most browsers return a fractional pixel value, i.e. 199.98px. Safari rounds off the fractional pixel value to 199px. It's a bit odd, as I would expect it would at least round up to 200px when the value is that close.

See demo:

See the Pen getComputedStyle width 66.666% by David DeSandro (@desandro) on CodePen.

I've opened WebKit bug #126844 to capture this behavior.

I have found that using calc() values produces more expected results. If I change the width of the element to width: calc( 100% * 2 / 3 ), Safari returns with 200px. It's still problematic, but it's an improvement.

After a snafu with my previous hosting company, I've been using Amazon's static site service on S3.

Site is built in build/. I've been using Grunt mostly, but this would work just as well for Jekyll sites.

I use s3cmd to transfer the files. Everything in build/ gets uploaded.

s3cmd sync build/. s3://masonry.desandro.com

This command is saved in a Makefile. See masonry-docs/Makefile.

make deploy

So after set up, making a site takes one or two commands

grunt make deploy

See this workflow in use:

Masonry docs

Isotope docs

Draggabilly site

When listening to transition End event, the event object comes with propertyName. This is useful when detecting just what transition has completed.

elem.addEventListener( 'transitionend' function( event ) { console.log( event.propertyName + 'transition completed' ); });

Also interesting is how the transition end event will only trigger once if a property gets changed again, during a previous transition.