Skip to content

Instantly share code, notes, and snippets.

View jbail's full-sized avatar

Jeff Bail jbail

5 followers · 0 following
View GitHub Profile
@jbail
jbail / local-storage-with-json-parse-stringify.js
Created December 23, 2012 18:08
Local storage with JSON parse and stringify
var animal = {
name: 'Karl',
type: 'cat',
color: 'black',
age: 7
};
//convert JSON animal into a string
var dehydratedAnimal = JSON.stringify(animal);
@jbail
jbail / ios-checkbox-impl1.js
Created January 9, 2013 13:16
Sample implementation of iOS Checkbox Plugin as applied to all checkbox inputs on the page
$(function () {
$('input[type=checkbox]').ioscheckbox();
});
@jbail
jbail / ios-checkbox-impl.html
Last active December 10, 2015 21:08
<!doctype html>
<html>
<head>
<link href="ios-checkbox.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-- Your awesome website goes here... -->
@jbail
jbail / jquery-message-events.js
Created December 30, 2012 17:44
Listening for message events with jQuery
$(window).on('message', function (event) {
});
@jbail
jbail / window-post-message.js
Last active December 10, 2015 09:28
window.postMessage
//postMessage using an iFrame
var iframe = document.getElementById('my-iframe').contentWindow;
iframe.postMessage('good morning', 'http://jeffbail.com/');
//postMessage using a Window
var win = window.open('http://someawesomeurl.com', 'someawesomeurl');
win.postMessage('good evening', 'http://jeffbail.com/');
@jbail
jbail / querySelector-querySelectorAll.js
Created December 23, 2012 22:41
querySelector and querySelectorAll
var article = document.getElementById('article');
var p = article.querySelector('p'); //returns the first 'p' tag that's a child of the #article element
p = article.querySelectorAll('p'); //returns a NodeList containing all 'p' tags that are children of the #article element
@jbail
jbail / index.html
Created December 23, 2012 22:16
A CodePen by Jeff Bail.
<div class="info">
<p class="name">Jeff Bail</p>
<p class="address">
<span class="street">123 Awesome Ave</span>
<span class="city-state">Denver, CO</span>
<span class="country">United States</span>
</p>
<p class="tel">(XXX) XXX-XXXX</p>
</div>
@jbail
jbail / index.html
Created December 23, 2012 22:02
A CodePen by Jeff Bail.
<div class="info">
<p class="name">Jeff Bail</p>
<p class="address">
<span class="street">123 Awesome Ave</span>
<span class="city-state">Denver, CO</span>
<span class="country">United States</span>
</p>
<p class="tel">(XXX) XXX-XXXX</p>
</div>
@jbail
jbail / index.html
Created December 23, 2012 21:27
A CodePen by Jeff Bail.
<p><strong>Example 1</strong>: The link below will look good when hovered because the outline doesn't take up space.</p>
<p><a href="#" class="outline">I'm jumpy</a></p>
@jbail
jbail / index.html
Created December 23, 2012 21:24
A CodePen by Jeff Bail.
<p><strong>Example 1</strong>: The link below will be jumpy when hovered because borders take up space and there are none defined for the "off" state.</p>
<p><a href="#" class="border-jumpy">I'm jumpy</a></p>
<p><strong>Example 2</strong>: The link below has a transparent border in the "off" state, so it won't be jumpy when hovered.</p>
<p><a href="#" class="border-calm">I'm calm</a></p>