Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Dustin Hoffmann dustintheweb

🎯
Focusing
View GitHub Profile
View simple-parallax.js
const main = {};
const updateScroll = () => {
main.winScroll = $(window).scrollTop();
};
const parallaxLoad = () => {
const $someEl = $('.someEl');
$someEl.each((i,el) => {
let $el = $(el);
@dustintheweb
dustintheweb / in-viewport.js
Last active Oct 13, 2018
Elements in Viewport Fn
View in-viewport.js
const main = {};
const inViewport = ($el) => {
let winTop = main.winScroll;
let winBtm = winTop + main.winHeight;
let $elTop = $el.offset().top;
let $elBtm = $elTop + $el.outerHeight();
return $elBtm > winTop && $elTop < winBtm;
}
if (inViewport($el) === true) {
View scroll-direction.js
const main = {};
const updateScroll = () => {
main.winScroll = $(window).scrollTop();
if (!main.winScrollMem) {
main.winScrollMem = 0;
}
if (main.winScroll > main.winScrollMem) {
main.winScrollDir = 'down';
} else {
main.winScrollDir = 'up';
@dustintheweb
dustintheweb / optimize-typekit-async-load-with-callback
Last active Aug 29, 2015
Optimize the Typekit load w/ Async & add a callback
View optimize-typekit-async-load-with-callback
<!-- tk optimize // http://goo.gl/2A1IF7 -->
<script type = "text/javascript" > (function(e) {
var t = 3e3;
if (window.sessionStorage) {
if (sessionStorage.getItem("useTypekit") === "false") {
t = 0;
}
}
var n = {
kitId: "abcd1234",
@dustintheweb
dustintheweb / debug-ajax-console.js
Created Apr 13, 2015
Javascript to debug an ajax request
View debug-ajax-console.js
var oXhr;
oXhr = new XMLHttpRequest();
oXhr.id = (new Date()).getTime();
oXhr.onreadystatechange = function() {
if (oXhr.readyState === 4 && (oXhr.status === 200)) {
// code stuffs
console.log(this.id);
}
@dustintheweb
dustintheweb / self-clearing-setinterval-with-callback.js
Created Apr 11, 2015
A self clearing setInterval with a callback
View self-clearing-setinterval-with-callback.js
var i = 0;
var timer = setInterval(function(){
// stuff
if(i === 5) {
clearInterval(timer);
console.log('callback'); // callback after some time
}
}, 200);
@dustintheweb
dustintheweb / 29392738.md
Created Apr 2, 2015
Solution: Correctly configuring a static site with advanced routing - http://stackoverflow.com/posts/29392738
View 29392738.md

Ok I finally have this figured out.

First off, if you aren't familiar with the way GAE handles templating... it's a bit different than you would expect, but a pillar of getting this to work correctly.

This is what you want at the bottom of your app.yaml

- url: /
  static_files: dist/index.html
  upload: dist/index.html
  expiration: "15m"
View headroom-smart-offset.js
// -- headroom ---------------
(function($) {
var headOffset = (app.obj.$section.filter('.feature').height() / 2) - (app.obj.$header.height());
app.obj.$header.headroom({
'offset': headOffset,
'tolerance': 5,
'classes': {
'initial': 'animated',
'pinned': 'slideDown',
'unpinned': 'slideUp'
@dustintheweb
dustintheweb / index.html
Created Feb 28, 2015
AngularJS: Multiple ternary statements in ng-class
View index.html
<!doctype html>
<html ng-app="myApp">
<head>...</head>
<body ng-controller="myController" ng-class="(toggleClass1 ? 'class-1' : '')+' '+(toggleClass2 ? 'class-2' : '')">
<div>
stuff...
<div class="button1" ng-click="$toggleClass1 = !$toggleClass1"></div>
stuff...
<div class="button2" ng-click="$toggleClass2 = !$toggleClass2"></div>
</div>
@dustintheweb
dustintheweb / index.html
Created Feb 28, 2015
AngularJS: Toggle an external class from a click event inside of an include
View index.html
<!doctype html>
<html ng-app="myApp">
<head>...</head>
<body ng-controller="myController" ng-class="toggleClass ? 'click-active' : 'click-inactive'">
<div ng-include="/path/myInclude.html"></div>
</body>
</html>