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.

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.

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+

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

@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.