Skip to content

Instantly share code, notes, and snippets.

@timhettler
timhettler / reveal.js
Created March 12, 2012 16:24
Animating an element from a fixed height to "auto" height using jQuery
var $selector = $('div');
$selector.data('oHeight',$selector.height()).css('height','auto').data('nHeight',$selector.height()).height($selector.data('oHeight')).animate({height: $selector.data('nHeight')},400);
@timhettler
timhettler / top-words.js
Created March 29, 2012 20:20
Take a String and return the top N words found within the String, by frequency
(function top(string, num) {
var words = string.toLowerCase().split(/[\s,.]+/),
count = {},
topWords = [];
for(var i=0; i<words.length;i++){
(count[words[i]] !== undefined) ? count[words[i]]++ : count[words[i]] = 1;
}
var list = Object.keys(count).sort(function(a, b){return count[a]-count[b];}).reverse();
figure {
box-shadow: 0 18px 5px -18px rgba(0,0,0,.7), 0 12px 8px -12px rgba(0,0,0,.5);
margin: 0 auto;
overflow: hidden;
padding-bottom: 10px;
position: relative;
width: 300px;
}
figure img {
@timhettler
timhettler / dabblet.css
Created April 26, 2012 19:03
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
body {
font: bold 15px/1.1 Helvetica;
text-align: center;
}
div {
@timhettler
timhettler / interview-closure.js
Created July 6, 2012 16:27
"Interview code" that demonstrates knowledge of closures.
for(var i=0;i<10;i++){
(function(i){
setTimeout(function(){console.warn(i)},i*1000);
})(i);
}
// Original script: http://www.jeffreyharrell.com/blog/2010/11/creating-a-shake-event-in-mobile-safari/
// Thanks to Ben Allman's write-up of jQuery Special Events: http://benalman.com/news/2010/03/jquery-special-events/
// jQuery shake event by Tim Hettler
(function ($) {
$.event.special.shake = {
setup: function ( data, namespaces ) {
@timhettler
timhettler / dabblet.css
Created October 2, 2012 20:24
Untitled
figure {
box-shadow: 0 18px 5px -18px rgba(0,0,0,.7), 0 12px 8px -12px rgba(0,0,0,.5);
margin: 0 auto;
overflow: hidden;
padding-bottom: 10px;
position: relative;
width: 300px;
}
figure img {
@timhettler
timhettler / Prism.languages.scss
Last active December 14, 2015 17:19
SCSS language definition for Prism
Prism.languages.scss = {
'comment': {
pattern: /(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,
lookbehind: true
},
'keyword': {
pattern: /(\s)(if|in|from|through|and|or|not)(?=\s)/i,
lookbehind: true,
},
'boolean': /\b(true|false)\b/g,
@timhettler
timhettler / interactiontypes.js
Last active December 17, 2015 03:28
A quick way to use the appropriate event based on input device
var interactionType = {
click: (Modernizr.touch) ? 'touchend' : 'click',
down: (Modernizr.touch) ? 'touchstart' : 'mousedown',
up: (Modernizr.touch) ? 'touchend' : 'mouseup',
enter: (Modernizr.touch) ? 'touchstart' : 'mouseenter',
leave: (Modernizr.touch) ? 'touchend' : 'mouseleave',
over: (Modernizr.touch) ? 'touchstart' : 'mouseover',
out: (Modernizr.touch) ? 'touchend' : 'mouseout',
move: (Modernizr.touch) ? 'touchmove' : 'mousemove'
};
@timhettler
timhettler / SassMeister-input.scss
Created June 25, 2013 20:57
Generated by SassMeister.com, the Sass playground.
// ---
// Sass (v3.2.9)
// ---
%placeholder {
color: red;
}
%placeholder {