Pete's public fiddles
-
Veeva Active Nav
Place the Javascript into the appropriate template.
-
AUI x Design Align Buttons
Pulls in the latest AUI stylesheet and adds in special button styles for WAC
-
Corbusier: Responsive Typography
Based off Corbusier's Le Modulor Dor, a modular scale system developed for architecture.
-
Play/Pause GIF on Hover
No-Library (pure JS), HTML, CSS, JavaScript
-
HTML5 Video Tag w/ Fallbacks
Host local video on your site without using streaming services like Youtube and Vimeo.
-
Simple Responsive Video Embed
All CSS, leaves original video embed codes (iframe, object, embed) intact. Added autoplay, modest branding, removed controls, placed overlay to prevent play/pause on click.
-
Responsive Youtube iframe Embed
Bypass the intrinsic, static height/width attributes needed to display the iframe to allow for responsive resize. Also includes a responsive overlay that bypasses the wmode issues and disables the click to play/pause.
-
ClipHoarder Device Page
a simple page with animated sections. Animations build by myself.
-
Easy CSS Tabs
A simple approach to CSS-only tab UI. Uses :target and anchor tabs to show/hide content sections.
-
Baker Huges Timeline Event
Simple layout for an individual BH timeline event. Take note of the scrolling text section.
-
LilSlideshow
Works best with fixed images sizes.
-
Pure CSS Slideshow w/ Captions
Comes in handy for non-javascript environments. Not a great solution for a slideshow as it's based on static keyframe animation, one keyframe set for each slide. Not easily extensible.
-
Special Accordion
Built for a client's specific needs.
-
Hover to Expose
Simple CSS animation (cross-browser) that exposes a portion of
-
Faux Ordered Lists
Simple CSS-only method to style the pesky <OL>
-
SimpleSlider
a custom-built slider to make any content have dynamic navigation. Dimensions and styles are all controlled via CSS.
-
GH Recirculated Feed Schedule
A dynamic, code-based version of the General Hydroponic Recirculated Feed Schedule.
-
ClickHoarder Organize Page
Simple page with animated elements.
-
ClickHoarder Capture Page
A simple page with animated elements.
-
ClickHoarder Welcome Page
a simple page with animated elements. I built the animations myself.