Demos & Snippets

Scroll Down Before/ After Effect Image Switcher | Created: 14th Feb 20
Scroll down the page to reveal a hidden image with this nifty before and after image switch effect. Change the CSS transition or animation to customise.

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.

Log and block email spam IPs w/ PHP + .htaccess | Created: 29th Aug 18
Getting spam delivery failure messages in your inbox? Use PHP to log spammer IPs and block them from further attacks on the mail server with .htaccess.

Responsive CSS3 Blinds Effect Slideshow | Created: 7th Aug 18
A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.

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.

Defer YouTube Load until Scrolled-To (Lazy-Load) | Created: 21st Mar 18
Defer the loading of YouTube embeds until they're scrolled into the viewport. Here's a simple lazy-loading video script to make web pages load much faster.

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.

Defer Image Load until Scrolled-To (Lazy-Loading) | Created: 7th Nov 17
Defer the loading of images until they're scrolled into the viewport. Here's a simple lazy-loading image script to make web pages load much faster.

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+

Full Height Split Screen Panels with Scroll | Created: 5th Apr 17
This CSS-only demo uses viewport units for full height panels on any screen. Additionally, the left sides are fixed size, while the right sides scroll.

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.

Scheduled 'SiteShow' Slides with PHP | Created: 30th Sep 16
Building on the 'SiteShow' with Controls demo, this article shows you how to adapt the scripts to schedule in slides for specific times, days or dates.

Image Orientation Detection (JS) | Created: 15th Sep 16
Detect whether images are landscape or portrait and dynamically apply a CSS class with JS. Style portrait images one way, and landscape images another!

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!

Img Src to Background-Image (object-fit:cover) | Created: 23rd Jun 16
Convert an img src attribute into a background-image with JS, so that background-size:cover can be applied. Polyfill for object-fit:cover in IE/ Edge.

Pop-up Image Viewer with Entrance Effects | Created: 27th May 16
A responsive, pop-up image with on-demand image loading. A spinner shows while loading, then an image zooms, fades, sweeps or drops in to view.

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!

Print CSS: Setting up a Print Stylesheet | Created: 31st Mar 16
Learn how to set up a print stylesheet for your website, so that it looks as good in print as it does on screen (starter CSS, tips and tricks included).

Display Excerpts From an RSS Feed, with Pagination | Created: 10th Feb 16
PHP5 reads an RSS file and outputs HTML excerpts, with 'read more' links leading to the full story. Pagination displays a long RSS over many pages.

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.

RWD Audio Player with Zip & Download Playlist | Created: 19th Jan 16
Build a playlist from a folder of mp3s and play them in this responsive audio player. Visitors can download tracks with a convenient zip and download feature.

XML to HTML with SimpleXML (PHP) | Created: 13th Jan 16
This tutorial shows how to extract XML data (tags and attributes) and parse it into web pages as HTML, with the help of PHP5's SimpleXML extension.

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.

On-Demand Animated GIF Player (JS) | Created: 16th Dec 15
Play animated GIFs on-demand with this JavaScript GIF player. No dependencies. Initial loading of a GIF is delayed until the user starts playback manually.

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.

Responsive 'Ken Burns' Slideshow + Captions | Created: 5th Oct 15
A responsive, cross-fading slideshow with CSS3 'Ken Burns' panning and zooming animation, and captions that sweep in from the bottom right corner.

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.

RWD Video Player with Playlist + Caption | Created: 5th Aug 15
Populate a playlist from a folder of mp4s and play them in this responsive video player. With currently playing caption. Uses the default HTML5 video skin.

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.

Responsive CSS3 Cross-Fading Slideshow | Created: 17th Jun 15
A simple cross-fade slideshow, powered with a few lines of JS. Stacked media queries serve smaller images to mobile. Retina image technique included.

Responsive Pop-up YouTube Videos | Created: 2nd Jun 15
Pop-up YouTube videos in the middle of the screen with a small JS function. The pop-up resizes fluidly for mobile and desktop. Includes CSS3 loading bars.

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.

Responsive CSS3 Fade-To-Black Slideshow | Created: 15th May 15
A basic fade-to-black slideshow, powered with a few lines of JavaScript. Images are pulled from a folder with PHP. For modern browsers and IE9+.

Circular Segment Pie Chart Menu | Created: 11th May 15
An experimental, circular menu, that's cut into rings and segments (like a pie chart). Calculations for skew and rotate transforms are included in the CSS.

RWD Audio Player with Playlist, Timeline + Caption | Created: 1st May 15
Populate a playlist from a folder of mp3s and play them in this responsive audio player. Includes nifty loading animation, timeline controller and fade-in caption.

Opt-Out of Responsive Design + Save Cookie | Created: 16th Apr 15
This PHP script allows users to opt-out of RWD and view fixed width desktop layouts on mobile devices. A cookie saves layout selection for 30 days.

RWD Audio Player with Timeline, Caption + Cookie | Created: 10th Apr 15
Play a random mp3 in this responsive audio player, with draggable timeline controller, fade-in caption box and cookie to remember auto-play setting.

Responsive CSS3 Fading Quotes | Created: 24th Mar 15
Fade-in quotes or testimonials elegantly with this CSS3 demo for IE10+ and modern browsers. JavaScript support for IE9. IE7/8 users just see the last item.

Responsive CSS3 Fullscreen 'Ken Burns' Slideshow | Created: 8th Mar 15
A responsive, fullscreen slideshow using CSS3 transforms to create a Ken Burns panning and zooming effect. A small JavaScript function handles timing.

Simple Audio Player + Play/ Pause icons | Created: 24th Feb 15
A simple audio player for single .mp3 sounds or songs. Play/ pause toggles provide basic controls, and the indicator icons change according to play state.

Form Focus Tip Box with CSS Fade | Created: 23rd Feb 15
A really easy way to show tip/ hint boxes to users as they fill out a form. Uses the :focus pseudo selector and a gentle fade animation with CSS.

Random Auto-Play Audio with Caption + Cookie | Created: 15th Jan 15
Auto-play a random song from a folder of mp3s and display the title in a neat fade-in caption box. With toggle switch to turn the sound off and on again.

Responsive Modal Overlay/ Pop-up Image Viewer | Created: 11th Jan 15
A responsive, pop-up image viewer with on-demand image loading. The modal overlay is triggered by a small JS function, and styled with CSS.

PHP Style/ Content Switcher + Save Cookie | Created: 19th Dec 14
Here is a simple PHP script to change stylesheets or load in alternative content (conditional loading), with cookies to store user selection.

CSS-Only Responsive Fullscreen Video | Created: 5th Dec 14
Responsive images have background-size:cover; but videos are left out in the cold until object-fit:cover; gains better browser support. Here's a workaround.

Responsive Fullscreen Image with Content Below | Created: 1st Dec 14
This fullscreen image always fills the initial viewport, regardless of device or screen size. Content is placed underneath for maximum visual impact.

CSS3 Grid Images - Fluid Scale, Responsive | Created: 24th Sep 14
A responsive grid of images that resize fluidly as screen size changes. Includes online calculator to easily calculate image margins and width % per row.

Responsive CSS3 Diamond Grid Images | Created: 28th Aug 14
Four demos for grids of images that are rotated 45 degrees; Two demonstrate fluid scaling, and two have images that overflow as the screen narrows.

3 Ways to Resize/ Scale Images in RWD | Created: 14th Aug 14
A look at visual image manipulation using fixed ratio, target ratio and fluid ratio techniques. Includes online calculator to calculate a 'sloping scale'.

@font-face CSS Demo | Created: 18th Sep 13
@font-face works fine nowadays, but this demo hails from 2013 when problems arose in old Firefox and Chrome. Keeping for posterity's sake.

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.