useful.js

JavaScript examples, too useful not to share.

Collapsible Content

An accordion style collapsing list to be used as an FAQ. The animations are CSS3 transitions, which can be customised from the style sheet.

Download latest version

A Simple Countdown Timer.

Counts down to a future date using text and class names to add styling to.

Download latest version

HTML5 Form Functionality

A form using HTML5 form elements, that validates both client- and server-side and stores the entries in XML.

Download Latest Version

Pinboard Gallery

This content gallery loads content progressively using AJAX and uses CSS3 transitions for animation and positioning. The optional web service providing the content is based on PHP, but the concept can be easily reproduced in other languages.

Download latest version

HTML to CSS Converter

This converter parses the structure of any given piece of HTML and generates a rough empty stylesheet from it.

Download latest version

Modal Popup Window

A link is opened in a modal window layer and animated using CSS3 transitions. It can be modified and closed from within the iframe.

Download latest version

Animated Slideshow

This slideshow uses CSS3 transitions for smooth animations, especially on mobile devices. Using CSS3, makes it easy to customise the effect.

The animations are emulated in Internet Explorer, which doesn't support CSS3 transitions, but use the same stylesheet rules.

Download Latest Version

Tabbed Content

A selection of content grouped together as a tabbed display. The markup is semantically correct HTML5. The animations are CSS3 transitions and customisable from the style sheet.

Download latest version

Image Viewer

This tile-based image viewer loads only the parts of the image that are visible. Not unlike how Google Maps loads map tiles.

This demo comes with a web service to divide large images into tiles using PHP, but the concept is easily replicated in other languages.

Download latest version