Skip to content

Instantly share code, notes, and snippets.

View dtipson's full-sized avatar

Drew dtipson

View GitHub Profile
@dtipson
dtipson / dabblet.css
Created June 7, 2013 15:06
SVG Share Buttons using text-align: justify
/**
* SVG Share Buttons using text-align: justify
*/
.three-share-btns {
margin:100px auto; /*just so it shows up*/
width: 418px; /*defines pretty much everything*/
height: 22px; /*works best in this case when this is predefined*/
}
@dtipson
dtipson / dabblet.css
Created June 7, 2013 15:10
SVG Share Buttons using text-align: justify
/**
* SVG Share Buttons using text-align: justify
*/
.three-share-btns {
margin:100px auto; /*just so it shows up*/
width: 418px; /*defines pretty much everything*/
height: 22px; /*works best in this case when this is predefined*/
}
@dtipson
dtipson / dabblet.css
Created July 20, 2013 23:19 — forked from LeaVerou/dabblet.css
Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
/**
* Loading animation like the one seen on http://www.freeger.com/projects/contextad/ with CSS
* Caveat: Not DRY. The content needs to be repeated in a data- attribute (or directly in the CSS).
*/
body {
background: #ccc51c;
min-height: 100%;
}
@dtipson
dtipson / responsive-request-desktop-site.js
Last active November 23, 2025 12:34
How to make responsive sites better respect the "Request a desktop site" feature on modern mobile browsers.
/*
Enable the "Request Desktop Site" functions on mobile chrome (android and iOS) allow users to see desktop layouts on responsive sites. Note that this is distinct from "opt out of mobile!" buttons built into your site: this is meant to work with the browser's native opt-in/opt-out functionality.
Since these functions work, in part, by simply spoofing the user agent to pretend to be desktop browsers, all we have to do is just remember that the browser once claimed to be android earlier in the same session and then alter the viewport tag in response to its fib.
Here's an example viewport tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> that we'd be setting to scaleable-yes,max scale=2. That's just an example of something that works on the site I was building: you should customize the "desktop" viewport content setting to whatever works for your site's needs. If you wanted, you could stick this code in the head just after the primary viewport tag so that the br
@dtipson
dtipson / 0_reuse_code.js
Created August 6, 2014 16:27
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@dtipson
dtipson / dabblet.css
Created September 10, 2014 15:45 — forked from LeaVerou/dabblet.css
Switch-style checkboxes.
/**
* Switch-style checkboxes.
* Inspired by Espresso’s “Tools” switch
*/
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked { /* :checked here acting as a filter for older browsers */
position: absolute;
opacity: 0;
}
@dtipson
dtipson / gist:7ba94242aed044febf98
Last active August 29, 2015 14:10
Fullscreen an iframe of CNN _on_ cnn.com and surf silently in Safari
jQuery('html').empty().html('<iframe src="http://cnn.com" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"></iframe>');
@dtipson
dtipson / gist:c1d01bac35d8baca25e3
Last active August 29, 2015 14:14
micro-plugin that allows you to one-line callbacks and chain compose jQuery operations
(function($){
/*define the function */
function use(method /*args*/){
return use.fn.init.apply({},[Array.prototype.slice.call(arguments)]);
}
/*define the underlying prototype*/
use.fn = use.prototype = {
init: function(initStack,oldstack){
$ = jQuery;
function hardWidth($el){
$el.css({width:$el.width()});
}
function hardSize($el){
$el.css({height:$el.height(),width:$el.width()});
}
@dtipson
dtipson / gist:a392eb4c5c7a5a51c047
Last active August 29, 2015 14:24
Boilerplate example of how to "trap" tab events inside a modal so users can't tab to elements outside it while it's active
var keydownTabString = 'keydown.tabnamespace';//string of the custom event using a custom namespace
function getInputs($modalOuter){
return $modalOuter.find('select, input, textarea, button, a[href], [tabindex]').filter(':visible');
}
function switchTabFocusTarget($switchFocusTo, noshift){
return function(e){
if ((e.which === 9 && (noshift?!e.shiftKey:e.shiftKey))) {
stopEvent(e);