Pens from Sean Timm https://codepen.io/seantimm/ en nospam@codepen.io Copyright 2024 2020-07-01T21:43:38-07:00 Event Capture for All Page Links https://codepen.io/seantimm/pen/pogdBem https://codepen.io/seantimm/pen/pogdBem Sean Timm

See the Code - See it Full Page - See Details

Demonstrates a simple document-level event capture for all A tag clicks. Hooks into bubble down instead of bubble up to ensure it can't be cancelled.

]]>
Event Capture for All Page Links 2020-07-01T21:43:38-07:00
A Pen by Sean Timm https://codepen.io/seantimm/pen/JBZJwZ https://codepen.io/seantimm/pen/JBZJwZ Sean Timm

See the Code - See it Full Page - See Details

]]>
A Pen by Sean Timm 2018-08-03T16:49:26-07:00
A Simple ES6 React View https://codepen.io/seantimm/pen/YqzMmr https://codepen.io/seantimm/pen/YqzMmr Sean Timm

See the Code - See it Full Page - See Details

This is a simple example of an ES6 React View. I'm using Babel to compile the .js file, but ignore that for now and experiment!

]]>
A Simple ES6 React View 2016-05-10T17:52:22-07:00
A Pen by Sean Timm https://codepen.io/seantimm/pen/gPqWGe https://codepen.io/seantimm/pen/gPqWGe Sean Timm

See the Code - See it Full Page - See Details

]]>
A Pen by Sean Timm 2016-02-12T21:17:04-07:00
Calculate Height when Element becomes Visible https://codepen.io/seantimm/pen/AxBPoQ https://codepen.io/seantimm/pen/AxBPoQ Sean Timm

See the Code - See it Full Page - See Details

This pen demonstrates the use of a MutableObserver to automatically calculate the height of an element once it has become visible. I've also included a fallback to the DOMAttrModified mutation event if MutableObserver is not available. There is a performance penalty with using mutation events which will impact all attribute changes on the page. You'll need to click on both buttons in the example to see the Height value change to the expected value of 200.

]]>
Calculate Height when Element becomes Visible 2014-01-05T23:54:02-07:00
Foundation Clearing w/ Initial Load Spinner https://codepen.io/seantimm/pen/nzaLLN https://codepen.io/seantimm/pen/nzaLLN Sean Timm

See the Code - See it Full Page - See Details

This pen demonstrates hooking into Foundation's Clearing component to show a spinner during initial load. This can be useful in cases where there are slow connections or large images since the Clearing component won't display until the image is loaded. I'm using Foundation Clearing v. 4.3.3 and spin.js for the spinner.

]]>
Foundation Clearing w/ Initial Load Spinner 2013-10-20T03:32:19-07:00
Foundation Reveal Event Bug #2951 https://codepen.io/seantimm/pen/AVyjGL https://codepen.io/seantimm/pen/AVyjGL Sean Timm

See the Code - See it Full Page - See Details

This pen is a demo of issue number 2951 of Zurb Foundation reveal.js Link to issue: https://github.com/zurb/foundation/issues/2951

]]>
Foundation Reveal Event Bug #2951 2013-08-25T03:14:54-07:00
Knockout - foreach binding https://codepen.io/seantimm/pen/nbWweV https://codepen.io/seantimm/pen/nbWweV Sean Timm

See the Code - See it Full Page - See Details

]]>
Knockout - foreach binding 2013-06-16T02:22:42-07:00
Knockout - attr binding https://codepen.io/seantimm/pen/AeWdJE https://codepen.io/seantimm/pen/AeWdJE Sean Timm

See the Code - See it Full Page - See Details

This pen demonstrates attribute binding using Knockout.

]]>
Knockout - attr binding 2013-06-16T02:04:00-07:00
Knockout - style binding https://codepen.io/seantimm/pen/AxdEwj https://codepen.io/seantimm/pen/AxdEwj Sean Timm

See the Code - See it Full Page - See Details

This pen demonstrates how to do style binding using Knockout.

]]>
Knockout - style binding 2013-06-16T00:15:08-07:00