Matt's public fiddles
-
Single line definition list with fixed width titles
One of those annoying CSS layout problems.
-
High performance touch interaction demos
Updated demos for http://maketea.co.uk/2015/02/16/high-performance-touch-interactions.html
-
Sticky Sidebar
jQuery 1.11.0, HTML, CSS, JavaScript
-
Draggable panel
A mouse and touch draggable panel with support for calculating the velocity of a gesture.
-
Live distance from point to point
A simple script using the haversine formula to calculate the distance between the current location and a specified point.
-
Time ago
No-Library (pure JS), HTML, CSS, JavaScript
-
Time until
A simple function to calculate the difference between two ISO 8601 dates rounded to the nearest 30 seconds.
-
Gremlins bookmarklet
Quickly run a monkey test in your browser using gremlins.js$hd
-
Disapprove bookmarklet
Share your disapproval of bad websites via their Google Analytics integration
-
Table layout example
No-Library (pure JS), HTML, CSS, JavaScript
-
Horizontally centred CSS dropdown menu (steps)
No-Library (pure JS), HTML, CSS, JavaScript
-
Smooth text overlays with CSS transforms
This is a robust, performant image caption with an overlay that will slide up to reveal more content.
-
Horizontally centred CSS dropdown menu
A CSS-only dropdown menu that is positioned horizontally central relative to its control without knowing the width of the content.
-
Animated page jump links with focus
Jump or skip links provide a useful shortcut for users who do not use a mouse but they're usually hidden, even when focused...
-
Image Zoom (vanilla JS)
A simple in-place image zoom.
-
Simple slideshow (vanilla JS)
A simple slideshow with before/current/after hooks for CSS transitions.
-
Accessible modal window (vanilla JS)
A very basic modal window implementation.
-
Usable hidden labels
Visually replace form labels for text and select inputs without abusing HTML or usability.
-
Accessible expandable content (vanilla JS)
Adds expandable content behaviour to the element with associated accessibility hints.
-
Accessible dropdown menu (vanilla JS)
Adds dropdown behaviour to the element with associated accessibility hints.