Skip to content

Instantly share code, notes, and snippets.

View neodigm's full-sized avatar
💯
Product Designer ⚡ Interactive Storyteller

Scott C. Krause neodigm

💯
Product Designer ⚡ Interactive Storyteller
View GitHub Profile
@neodigm
neodigm / simple_image_lazy_load.js
Last active September 27, 2018 19:58
JavaScript Lazy Load
"use strict";
var fLazy = (function(doc){
return { "init" : function( _bMobl ){
var _aE = [].slice.call( doc.querySelectorAll( "[data-lz-src]" ) );
_aE.filter( function( _e ){
if( _bMobl ){ // isMobile
if( _e.dataset.lzM ){ // data-lz-m
_e.src = _e.dataset.lzSrc;
}
}else{
@neodigm
neodigm / win_remove_if_exists_other_folder.ps1
Last active September 27, 2018 20:00
This Windows PowerShell script takes an inventory of one folder and for each file that exists will execute a delete in another folder. I wrote this to deal with some bizarre node/gulp race conditions while doing image optimization. So if a file has been processed (compressed) it is ok to delete it from the images_in folder.
# 20160601 Scott C. Krause
# Remove files that exist within out from the in folder
# This Windows PowerShell script takes an inventory of one folder and for each file that exists will execute a delete in another folder.
# I wrote this to deal with some bizarre node/gulp race conditions while doing image optimization.
# So if a file has been processed (compressed) it is ok to delete it from the images_in folder.
$dest = "\\compressed"
$source = "\\images_product\images_in"
$in = Get-ChildItem $source
@neodigm
neodigm / blinked_class.js
Last active December 7, 2018 21:09
Vanilla JavaScript Blink Class
// Add and Remove a class repeatedly for a set duration for a set number of times (blinking or animating).
// This is good for blinking an element for a few seconds to attract attention to it.
var fBlinkClass = function( _sQuery, _sClass, _nItra, _nDura ){
var eChevr = document.querySelector( _sQuery ), _nCur = 0, _si;
eChevr.classList.add( _sClass );
_si = window.setInterval(function(){
if( ++_nCur <= _nItra ){
if( eChevr.classList.contains( _sClass ) ){
eChevr.classList.remove( _sClass );
}else{
@neodigm
neodigm / zurb_foundation_equalizer_alternative.js
Created May 2, 2017 21:38
Lightweight Zurb Foundation Equalizer alternative
// Lightweight ZF Equalizer alternative
// Will make two or more HTML elements the same height
// Usage: eq2.makeEqual("[data-equalizer-watch='your_pattern']");
var eq2 = {
Mx: 0,
makeEqual: function( data_eqlzr_watch ){
$( data_eqlzr_watch ).each(function(){
eq2.Mx = ( this.clientHeight > eq2.Mx ) ? this.clientHeight : eq2.Mx;
});
$( data_eqlzr_watch ).css("height", eq2.Mx + "px");
@neodigm
neodigm / canIUseWebP.js
Last active December 18, 2018 20:34
JavaScript WebP support detection
function canIUseWebP() { // Original Author Unknown
var elem = document.createElement('canvas');
if (!!(elem.getContext && elem.getContext('2d'))) {
return elem.toDataURL('image/webp').indexOf('webp') == 0;
}
return false;
}
@neodigm
neodigm / monetate_inspector.js
Created January 17, 2019 20:17
monetate js
(function(){var a=Math.floor(((new Date).getTime()+1112009)/864E5),b=window,c=b.document,d="https://marketer.monetate.net/control/inspector/"+a+"/",e=b.__mti&&b.__mti.open;if(e)e();else if(!c.getElementById("mtInspector-script")){var f=c.getElementsByTagName("head")[0]||c.body;if(f){var g=f,h=d,i=c.createElement("link");i.href=h+"inspector.css";i.rel="stylesheet";g.insertBefore(i,g.firstChild);var j=f,k=d,l=c.createElement("script");l.src=k+"inspector.js";l.id="mtInspector-script";j.insertBefore(l,j.firstChild)}};})();
@neodigm
neodigm / infinite_scroll_sample.html
Created March 20, 2019 15:35
Infinite Scroll ⚡️ Scott C. Krause, lazy load and intersection observer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Infinite Scroll ⚡️ Scott C. Krause</title>
<style>
/* --------------------
Add your styling here
-------------------- */
.container {
@neodigm
neodigm / ax.html
Last active June 16, 2019 00:18
Simple quad CSS grid layout
<!DOCTYPE html>
<html lang="en">
<head>
<title>QQQQ | emoji</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
@neodigm
neodigm / material_design_input.js
Last active June 16, 2019 00:25
Simple vanilla JavaScript Material Design INPUT element IIFE. Exception list can be class or id.
var labelMD_default = { // Detault configuration
mode: "default",
aExcludeID: ["js-qty__input--id","js-inp-search--id","js-toplogo-slide__input--id","js-inp-topsearch--id","quickSearch-query-for-small","emailSubscribeAddressModal","emailAddressFieldId","quickSearch-query"],
aExcludeCL: ["js-eml__input--field", "js-sms__input"]
};
//var labelMD_custom = { mode: "custom" } // Custom configuration
var labelMD = ( function( _d, _g ){ // Dynamic Material Design INPUT Labels
var aInp = [], aLab = [], oCnf = {}, sBrand;
"use strict"; // Act on Tab when link clicked
var oTb, oLk;
oTb = document.querySelectorAll(".tablink4")[0];
oLk = document.querySelectorAll("[href='/#tablink4']")[0];
if( oTb && oLk ){
oLk.addEventListener( "click", function(e){
oTb.click();
} );
}