Skip to content

Instantly share code, notes, and snippets.

View kylejson's full-sized avatar

Kyle Johnson kylejson

71 followers · 42 following
View GitHub Profile
@kylejson
kylejson / faux-parallax.html
Last active August 29, 2015 13:56
Using background-size: cover; property and background-position: fixed to give off a cool scrolling effect!
<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Faux-parallax</title>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
text-align: center;
margin: 0;
@kylejson
kylejson / test.html
Created March 23, 2014 01:06
Send canvas as image to server/save form input in localStorage
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
@kylejson
kylejson / getJSON.js
Created April 14, 2014 20:56
Tiny Api call javascript/jquery example. Taking data and putting it in the DOM to be styled.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* styles for the element*/
h1{
font-family: helvetica;
}
@kylejson
kylejson / game.html
Last active August 29, 2015 14:01
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function setHealth(obj) {
@kylejson
kylejson / tracery-grid.css
Last active August 29, 2015 14:09
Simple 6 column grid
/* Reset */
*,
*:after,
*:before {
margin: 0;
padding: 0;
box-sizing: border-box; /* http://caniuse.com/#search=border-box, known compatibilty to IE8 without issues in this usage */
}
/*
@kylejson
kylejson / demo.html
Last active August 29, 2015 14:14
Parse demo of registering a User and Login with error messages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parse Test</title>
<style>
p {
font-size: 20px;
}
@kylejson
kylejson / center.module.js
Last active August 29, 2015 14:15
Center something with Jquery absolutely within the viewport
$.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
return this;
}
@kylejson
kylejson / queryStrings.js
Created August 31, 2015 19:27
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}