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
1.5k followers · 5.9k following
View GitHub Profile
@neodigm
neodigm / email_popup.js
Created December 13, 2018 21:02
The email promo dialog script and markup are below. The markup must exist in the DOM before the JS is executed. The modal will show once every seven (7) days. The image displayed will be determined by the site brand. Clicking on the image will open the drawer and the email panel then close the reveal. If the reveal component is not on the page t…
"use strict";
// Show email promo image (branded) reveal once, every 7 days
// Open drawer to email panel when clicked
var fElmRevPromo = function( _d, _aIds ){
var _eRev = _d.getElementById( _aIds[0] ), _sBrand="LTD";
var _eRevI = _d.getElementsByClassName( _aIds[1] )[0];
return {
init: function( sBrand ){
if( sBrand && ( typeof _eRevI != "undefined") ){
@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 / isPalimdrome.js
Last active March 6, 2021 23:45
Palindrome test 🐱
// Is TACOCAT spelled backward still TACOCAT?
// People have been asking this question for thousands of years until...
// I wrote a function in JavaScript to prove it and end the debate. Palindrome in JavaScript
let isPalindrome = ( sIn = "tacocat" ) => ( sIn.split("").reverse().join("") === sIn );
/*
_._ _,-'""`-._
(,-.`._,'( |\`-/|
`-.-' \ )-`( , o o)
`- \`_`"'- My name is Omelette! ^_^
@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;
@neodigm
neodigm / m2g_tab_click.js
Created July 17, 2019 16:25
"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();
} );
}
@neodigm
neodigm / grid_system.html
Last active August 5, 2019 20:15
A simple grid system based on Flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>v2 standard grid system</title>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Site UX interactive Prototype">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link href="css/grid_system.css" rel="stylesheet">
@neodigm
neodigm / tt_custom_comment.html
Created August 13, 2019 20:05
Override the BR stuff in the TT booking tool comment
Front End Testing
<style>p.header-description { font-size: 22px!important; font-weight: 100; color: #edba08 !important; } BR {display: none;}</style>