Skip to content

Instantly share code, notes, and snippets.

View pixiebox's full-sized avatar

Patrick Danhof pixiebox

View GitHub Profile
<a class="vimeo-lazy-link" data-height="349" data-width="620" data-video="3137949" href="http://vimeo.com/3137949"></a>
function fetchJSONFile(path, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
if (callback) callback(data);
}
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
padding: 0;
position: relative;
}
li {
@pixiebox
pixiebox / responsive-arrow.html
Created March 19, 2016 16:24
responsive-arrow
<!DOCTYPE html>
<html>
<head>
<title>Responsive arrow</title>
<style>
div {
background: #eb7261;
position: relative;
height: 200px;
max-width: 600px;
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
// Deep Breaths //
//////////////////
// Gulp
var gulp = require('gulp');
// Sass/CSS stuff
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
.element:before {
content: '';
background: #000;
bottom: 40%;
height: 80%;
position: absolute;
transform: skewY(1deg);
width: 100%;
}
@pixiebox
pixiebox / iOs viewport fix
Last active October 23, 2016 10:16
iOs fixes
/*
@note
fallback iOS vh unit bug
*/
/* iPhone 4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
}
function viewport() {
var el = window,
attr = 'inner';
if (!('innerWidth' in window )) {
attr = 'client';
el = document.documentElement || document.body;
}
return {
@pixiebox
pixiebox / dynamicScript,js
Created October 23, 2016 10:19
dynamic script with callback
function dynamicAsset(script_name, cb) {
var body = document.body,
script = document.createElement('script'),
done = false;
script.type = 'text/javascript';
script.src = lang.templateUrl + '/dist/scripts/' + script_name;
script.onload = script.onreadystatechange = function(){
if ( !done && (!this.readyState ||
(function () {
/**
* docElement is a convenience wrapper to grab the root element of the document
*
* @access private
* @returns {HTMLElement|SVGElement} The root element of the document
*/
var docElement = document.documentElement;