Skip to content

Instantly share code, notes, and snippets.

View maxxcrawford's full-sized avatar

Maxx Crawford maxxcrawford

116 followers · 138 following
View GitHub Profile
@maxxcrawford
maxxcrawford / ParsleySubmitGTMFire.js
Created October 5, 2016 16:23
Fire a GTM dataLayer event on form submission using Parsley.js validation
// GTM Parsley Fire
if ( $('.rsvp-content form').length ){
$('.rsvp-content form').parsley().on('form:submit', function() {
// This global callback will be called for any field that fails validation.
// console.log( 'parsleySubmit' );
if (typeof dataLayer !== 'undefined') {
dataLayer.push({
"event": "form",
"section": "rsvp_submission"
});
@maxxcrawford
maxxcrawford / scrollTo.js
Created October 6, 2016 16:13
Smooth scroll js
function scrollTo(selector, offset){
target = $(selector);
if (target.length) {
var targetOffset = target.offset().top;
if (offset.length){
targetOffset = targetOffset - offset;
}
$('html, body').animate({
scrollTop: targetOffset
}, 'slow');
@maxxcrawford
maxxcrawford / border-box.css
Created October 19, 2016 16:04
Border Box Model
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
@maxxcrawford
maxxcrawford / res-video.css
Last active November 11, 2016 17:22
Responsive BG Video – http://codepen.io/AllThingsSmitty/pen/KNPOjp
:root {
font-size: calc(1vw + 1vh + .2vmin);
}
body {
background: #111;
font: 1rem/1.1 "Montserrat", sans-serif;
margin: 0;
}
section {
height: 100%;
@maxxcrawford
maxxcrawford / blur-overlay.css
Last active November 21, 2016 21:04
Add Blur Overlay on Focus
.c-search {
transition: opacity .5s ease;
transition: height .75s ease;
position: absolute;
display: block;
z-index: -999;
top: 0;
bottom: 0;
left: 0;
@maxxcrawford
maxxcrawford / full-viewport.js
Created November 22, 2016 16:10
Use vh/vw to break out of container
* {
box-sizing: border-box;
}
/* This technique doesn't naturally cause horizontal overflow, but once there is natural vertical overflow, it causes horizontal overflow, so stopping here. */
body {
overflow-x: hidden;
}
img {
@maxxcrawford
maxxcrawford / Meta-Social-Sharing.html
Created November 23, 2016 15:21
Facebook Twitter Social Sharing Open Graph OG Tags
<!-- // SOCIAL SHARING // -->
<!-- TODO: Recommended Image Size: 1200x643 -->
<!-- Open Graph Meta -->
<meta property="og:url" content="PAGE_URL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="PAGE_TITLE" />
<meta property="og:description" content="PAGE_DESCRIPTION" />
<meta property="og:image" content="IMAGE_PATH" />
@maxxcrawford
maxxcrawford / pubsub_V2.js
Created December 6, 2016 16:13
Publish Subscribe JS Util Lib
/* Simple PubSub
==================================================================================================== */
(function(d) {
// the topic/subscription hash
var cache = d.c_ || {};
d.publish = function(topic, args) {
// summary:
@maxxcrawford
maxxcrawford / mobileCheck.js
Created January 10, 2017 16:21
Switch global variable on screen size
(function($) {
"use strict";
var isMobile = false;
var windowWidth = $(window).width();
var mobileCheck = function(width, status) {
console.log('width: ' + width);
console.log('status: ' + status);
if (width >= 768) {
@maxxcrawford
maxxcrawford / sample-placeholder.html
Created January 12, 2017 17:05
Sample placeholder.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
/* Put Styles Here */