Skip to content

Instantly share code, notes, and snippets.


Sander Moolin SaFrMo

View GitHub Profile
SaFrMo / InfiniteScrollCheck.js
Created Jun 21, 2016
Infinite scroll on Teller
View InfiniteScrollCheck.js
// if not currently loading AND page has teaser AND page is scrolled to teaser area
var teaserHeight = 250;
if ( !jt2016.loadingPost && jQuery('.teaser').length && (jQuery('.teaser').offset().top < jt2016.sTop + jQuery(window).height() - teaserHeight) ) {
// get url from teaser element
var url = jQuery('.teaser').data('url');
// make new promise
jt2016.loadingPost = jQuery.ajax(url, {dataType: 'html'}).promise().done(function(data){
View iframe-fullscreen-sizer.js
// Make sure that iframe resizes correctly on fullscreen exit
// (ie, make Vimeo or YouTube videos return to the iFrame bounds on fullscreen exit)
var isFullscreen = false;
var videoSizer = null;
function onFullscreenToggle(){
var isFullscreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
View sequential-fade.js
jQuery('SELECTOR').each(function(i) {
setTimeout(function() {
}.bind(this), i * 100);
View scroll-percentage.js
var windowHeight = jQuery(window).height();
var docHeight = jQuery(document).height();
var scrollTop = jQuery(window).scrollTop();
var trackLength = docHeight - windowHeight;
var amountScrolled = scrollTop / trackLength || 0;
View drop.js - individual - folder
SaFrMo / sizeImages.js
Created May 10, 2017
Given `container`, find dimensions of `content`. Mimics background-position `contain` or `cover`.
View sizeImages.js
// Given `container`, find dimensions of `content`. Mimic either CSS background-position `contain` or `cover`.
// Both `container` and `content` must have height and width attributes.
// aspect ratio > 1: image is portrait
// aspect ratio < 1: image is landscape
const contain = ( contents, container ) => {
// thanks to
SaFrMo /
Last active Jun 21, 2017
Info for 3AM


  • Front Page/News (news pulls from Home Page category on posts)
    • Campaign
    • Campaign
    • ...
  • Work Grid
    • All
      • Work Detail
      • Work Detail
      • ...


Front Page

  • The first, second, and third children of the front page will become the top left, bottom left, and portrait right images on the front page (just below the hero).
  • The three latest posts with the "Front Page" category will be rendered on the front page.

Work Grids

  • The first child of any given work grid will be rendered in the featured spot for that work grid.

Bios on About page



  • Add a child to a work-detail page to make it a campaign - the campaign's body will be in the child
  • Maria Carretero page has a few special details:
    • "Color" category is structured like this:
      * Color
          * Maria Carretero
              * First Block Title - Second Block Title
              * Other Spots
              * ...
SaFrMo /
Created Sep 22, 2017
Funkhaus Plugins
  1. Vuepress: Vue.js on top of WordPress
  2. fitToParent: Vanilla JS to resize a DOM element to fit its parent container while maintaining original aspect ratio
  3. Zoomhaus: Vanilla JS+CSS smooth image takeover effect
  4. Rest-Easy: WordPress plugin to rest-ify your site with zero effort and powerful customization
  5. FH-Footer: Self-updating slide-to-reveal footer in vanilla JS
  6. FH-Overlap: Simple overlap checker in vanilla JS
  7. funky-colors: WordPress plugin to detect a palette of colors from each image in the media library
  8. Funky-Imgix: WordPress plugin to get Imgix images easily
  9. WP-Shopify: WordPress plugin for easy Shopify integrat