Demos & Snippets

Pop-up Text Message with Entrance Effects | Created: 19th Nov 18
A responsive, modal text popup in semi-transparent overlay, with zooming, fading, sweeping or dropping effect, thanks to CSS3 keyframe animations.

AJAX & PHP 5-Star Rating with Flat File Storage | Created: 16th May 18
Log and display votes with this 5-star rating system. Votes are saved to a .txt file. Average and totals are displayed in real time. One vote per device.

Keyboard Accessible 'Tab-to' Menu (JS) | Created: 1st Feb 18
Don't lose :focus! This JS adds keyboard 'tab-to' support to CSS-only multi-level menus, for better accessibility. Users can tab through drop-down sub-menus.

Scroll Wide Tables w/ Gradient + Indicator (JS) | Created: 5th Oct 17
Are wide tables breaking your web page layouts, particularly on mobile? Wrap a scrolling container around them automatically with this JS function.

Convert anchors to spans (LinkAdv/ Atto in Moodle) | Created: 21st Aug 17
Remove the rogue href generated by LinkAdv's id field in Moodle's Atto editor. This JS looks for matching href and id, and converts the a element to a span.

Add Class to Target when Trigger Scrolled in View | Created: 31st May 17
Add a class to a target-element when a trigger-element scrolls to an arbitrary distance from the top of the viewport. Define distance in px or %, -/+ integer.

Open External Menu Links in New Window (JS) | Created: 19th May 17
Use this JS function when you can't edit your menu to put target="_blank" on external links. You can optionally open sub-domains in a new window too.

Highlight Current Menu Button (JS) | Created: 21st Apr 17
Here's how to highlight the menu button for the web page that's currently being viewed, with a small JavaScript function. Modern browsers and IE8+

matchMedia viewport change to metatag | Created: 28th Oct 16
Using matchMedia (JS media queries) to detect changes in viewport width in order to update metatag content. Fit fixed-layout websites to tablets.

Scroll Progress Circle w/ Gradient + % Counter | Created: 2nd Sep 16
See how far you've scrolled down a web page, and how much there's left to go, with a progress circle and % counter. Includes colour gradient variation.

Scroll Progress with Indicator Bar + % Counter | Created: 19th Aug 16
See how far you've scrolled down with a progress bar and % counter. Useful on long articles to show visitors how far they've read, and how much is left.

Fullscreen 'SiteShow' with Controls (no jQuery) | Created: 6th Aug 16
Fade-in a list of URLs as a fullscreen 'SiteShow'. Individual slide duration, menu with previous, next, play/ pause controls and CSS3 animations.

Sweep-in News Scroller with Controls | Created: 29th Jul 16
A news scroller where messages sweep in and out with a gentle fade. Very light-weight - plain JS previous, next, play/ pause controls and CSS3 animations.

Randomly Loading Images, Divs, Links, etc. | Created: 7th Jul 16
Randomly load any number of images from an HTML list. Load in other things too - try randomly loading ads, featured content, quotes, videos, whatever!

SlideUp/ SlideDown Q&A or FAQs (no jQuery) | Created: 19th May 16
A Velocity Q&A/ FAQs script that reveals hidden answers in sliding panels. Open one, group, or all answers from the same page, or another page via a hash.

Drag & Drop Widgets + Dock to Sidebar + Save | Created: 6th May 16
Show and hide widgets by docking them to a sidebar or drag them around to change position. Their display state and position is saved in local storage.

Dock Widgets to Sidebar + Save Cookie | Created: 29th Apr 16
A small JavaScript demo where you can show and hide widgets by docking them to a sidebar. Their display state is saved with a cookie for 30 days. IE8+

Multi-Category Content Filter (hide or show selected) | Created: 20th Apr 16
Filter page content by class and refine results with multi-category selections. Change the filter behaviour to either hide or show selected items too!

SlideUp/ SlideDown Q&A or FAQs (jQuery) | Created: 1st Feb 16
A jQuery Q&A/ FAQs script that reveals hidden answers in sliding panels. Open one, group, or all answers from the same page, or another page via a hash.

iPad/ iPhone 'Sticky Hover' Fix (JS) | Created: 22nd Dec 15
One line of JS to fix the 'sticky hover' problem on iOS; Where hover CSS isn't removed from an active element until another focusable element is clicked.

Monthly/ Daily iFrame Content (JS) | Created: 25th Nov 15
Load a different page into an iframe for every month of the year (or every day of the month), and optionally navigate through past and future pages too.

AJAX & PHP Click-Counter with Flat File Storage | Created: 17th Nov 15
Log and display clicks on any HTML element. Counts are saved to a .txt file with PHP, while AJAX displays increasing counts in real time. No page refresh!

Simple Sweep-in News Scroller (CSS3/JS) | Created: 24th Oct 15
A no-frills, news box where messages sweep in and out with a gentle fade. Light-weight - its powered by a small JS function and animated with CSS3.

JS & CSS3 Content Filter (filter by class) | Created: 20th Sep 15
Create an animated, collapsible content filter for your website content, where categories are filtered by class. CSS3 transitions fade the results into view.

EU Cookie Law Consent Bar (accept cookies) | Created: 21st Aug 15
Comply with the EU cookie law with an 'implied opt-in' consent bar for website users to accept cookies. 'OK' dismisses the bar and hides it for 90 days.

Simple Swipe Gesture - Touch Events Handler | Created: 25th Jul 15
A lightweight touch events handler that only supports left, right, up and down swipe gestures. Also with 'fast click' for eliminating the 300ms touch delay.

Show 'New' Content Until Visited (link tracking) | Created: 26th May 15
Alert users to new content (added in the last ? days) with a blinking icon that disappears when a page has been read. Visited pages are saved in local storage.

Simple 'Read More' JavaScript reveal | Created: 18th Jul 13
Simple 'read more' JavaScript function that reveals more content onclick. Useful for FAQs and conditionally revealing long content on mobile.