Skip to content

Instantly share code, notes, and snippets.

@tillsanders
tillsanders / jquery.adjustat.js
Last active August 29, 2015 14:13
Execute javascript layout adjustments based on breakpoints only once
(function ($) {
$.fn.adjustAt = function(options) {
var elements = $(this);
// Default settings merged with received options
var settings = $.extend({
width: 0,
above: function(element) {},
below: function(element) {},
aboveRepeat: function(element) {},
belowRepeat: function(element) {}
@frdmn
frdmn / osx-10-10-virtualbox.md
Last active February 22, 2022 08:39
Install OS X 10.10 Yosemite in VirtualBox
@tillsanders
tillsanders / favicons.md
Last active January 13, 2016 16:43
Favicons, Tiles, etc.

Favicons, Tiles, etc.

  • favicon.ico - 32x32
  • favicon.png - 32x32
  • apple-touch-icon.png - 180x180 (iPhone 6 Plus, others resize it automagically)
  • tile.png - 558x558
  • tile-wide.png - 558x270
  • tile-150x150.png - 150x150
  • tile-310x310.png - 310x310
  • tile-70x70.png - 70x70
@tillsanders
tillsanders / menu-toggle-button-animation.md
Last active March 21, 2016 12:42
Animation for a mobile menu toggle. Three horizontal lines transform into a cross and back again.

Animate the transformation of a mobile menu toggle into a cross

Animation Transition for a mobile menu toggle. Three horizontal lines transform into a cross and back again. The top and bottom lines fall into the center, transforming into one line. The line(s) rotate clockwise, spawning a line at 45deg and stop at 135 deg, forming a cross. Demo: http://jsfiddle.net/SYYr5/84/

Annotations:

  • the animation uses four additional elements inside the a tag. This is not semantic, but we can at least use elements without a semantic meaning, like div and span
  • using a div as a second container, we are able to apply a padding to our a tag
  • We may need to use vendor prefixes :/
@jlong
jlong / uri.js
Created April 20, 2012 13:29
URI Parsing with Javascript
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"