Skip to content

Instantly share code, notes, and snippets.

View jshaw's full-sized avatar
🤖
👨‍🎨 👨‍💻

Jordan Shaw jshaw

🤖
👨‍🎨 👨‍💻
49 followers · 85 following
View GitHub Profile
@jshaw
jshaw / glossary.json
Created November 14, 2012 21:30
JSON Glossary Structure
var terms = {
"terms" : {
Lorem : {
"term": "Lorem",
"definition" : "Lorem: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
ullamco : {
"term": "ullamco",
"definition" : "ullamco: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
@jshaw
jshaw / index.html
Created November 14, 2012 18:14 — forked from anonymous/index.html
A CodePen by trickeedickee. CSS3 AT-AT - A pure CSS3 experiment I created. I could do with reducing the number of divs used to create the body parts. I also need to streamline the animations.
<div id="main">
<div id="head-neck-body">
<div id="head-neck">
<div id="head">
<div class="shape02"></div>
<div class="shape0"></div>
<div class="shape01"></div>
@jshaw
jshaw / IE8BackgroundOpacitySolution.css
Created October 30, 2012 17:17
IE8 Transparency / Opacity explination
/*
This is based on the assumption that the .pop-background element is inserted into the DOM at the bottom of the page after initial page load when the modal is initiated on click.
*/
.pop-background {
/* Works when inserted into the DOM after page load. Data-uri's work as well as hosted images. */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpiYGBgiAEIMAAAYQBdPMcrbwAAAABJRU5ErkJggg==") 0 0 repeat;
/*
Does not work when inserted after the DOM is initially loaded for the first time. The element will have no opacity filter applied.
background: black;
@jshaw
jshaw / virticalAlignImg.js
Created August 9, 2012 20:01
Vertically aligning images in a div (Fix for IE8 & 9)
// WORKS FF, Chrome, Safari, IE 8 & 9 etc...
$('.extra-content .graphics img').load(function() {
$(this).css('marginTop', $(this).parents('.graphics').height() / 2 - $(this).height() / 2 );
});
// DOESN'T WORK IE8 & 9
// With multiple images on a page this script seems unable to compute the marginTop var.
// However placing it directly into the CSS method works as shown above.
$('.extra-content .graphics img').load(function() {
var marginTop = $(this).parents('.graphics').height() / 2 - $(this).height() / 2;
@jshaw
jshaw / alertOrder.js
Created August 2, 2012 19:55
Checking execution order based on document and window ready / load state within a Facebook iFrame canvas ( page tab or app).
// Checking execution order based on document and window ready / load state within a Facebook iFrame canvas ( page tab or app).
// Executes 1st
// Same as $(document).ready(function(){});
$(function() {
alert('1');
});
// Executes 2nd
$(window).load(function() {
@jshaw
jshaw / Tests.FBResize.js
Created July 30, 2012 22:49
Possibilities
window.onload = function() {
FB.Canvas.setSize({ height: $(window).outerHeight() });
}
window.onload = function() {
setTimeout(function(){
FB.Canvas.setAutoGrow();
},1000);
}
@jshaw
jshaw / drawdrip.html
Created July 27, 2012 20:54
Draw and Drip (processing)
<!doctype html>
<html>
<head>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<div class="learning-demo">
<script type="application/processing">
@jshaw
jshaw / FacebookPageTabResizeiFrame.html
Created July 26, 2012 18:28
Resize the Facebook iFrame Tab Page with resizing content and different page heights on page loads.
<!DOCTYPE html>
<html lang="en" style="overflow: hidden">
<body style="overflow:hidden">
<head>
<!-- You need to include jquery & FBSDK-->
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
@jshaw
jshaw / YouTubeEventHandling.js
Created July 26, 2012 15:30
YouTube Video Playing and Finished Event Handling
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '254',
width: '451',
@jshaw
jshaw / trackVideoPlays.js
Created July 25, 2012 20:42
Player Event Listeners and Analytics for Vimeo
Highwire.prototype._trackVideoPlays = function(){
// Gets reference to the Vimeo video player
var f = $('#VimeoPlayer'),
url = f.attr('src').split('?')[0];
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
} else {