useful.js

JavaScript examples, too useful not to share.

Fork me on GitHub

Scripted Aspect Ratio

Keeps the proportions of a box the same regardless of browser size.

Demo

Scanned Print Media Viewer

A viewer for browsing through and zooming in on magazine pages.

Demo

Colour Picker

An alternative for the HTML5 color input element.

Demo

Cookies Library

A library of useful functions to ease working with cookies.

Demo

Animated Countdown Timer

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

Demo

Image Cropper

A visual touch interface for generating cropping coordinates.

Demo

Date Picker

An alternative for the HTML5 date input element.

Demo

Rotating Dial

A dial for setting a rotation property.

Demo

File Selector

An alternative for the HTML file input element.

Demo

Data Filtering

This script allows the contents of a table or list to be filtered by keyword.

Demo

HTML5 Form Functionality

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

Demo

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.

Demo

Gestures Library

A library of useful functions to ease working with touch and gestures.

Demo

Slideshow Banner

A simple responsive slideshow for graphical banners with touch controls.

Demo

HTML to CSS Converter

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

Demo

Instances Library

A library of useful functions to ease working with instances of constructors.

Demo

Interactions Library

A library of useful functions to ease working with touch and gestures.

Demo

Improvised Debug Console

Implements a debug console for use in browsers for which console messages may be inaccessible, like mobile apps and kiosk software.

Demo

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.

Demo

Ordering Lists

Order lists of results by arbitrary fields.

Demo

Parallax Backgrounds

Position and load backgrounds based on screen position.

Demo

Photo Map

Plots the GPS data of the photos in a slideshow on a map.

Demo

Photo Wall

The script arranges collections of images into a brick pattern.

Demo

Photo Zoom

Overlays a full screen preview of a thumbnail.

Demo

Input placeholder labels

An alternative for the HTML5 input element placeholders.

Demo

Polyfills Library

A library of useful polyfills to ease working with HTML5 in legacy environments.

Demo

Screen Positions Library

A library of useful functions to ease working with screen positions.

Demo

Range Selector

An alternative for the HTML5 range input element.

Demo

AJAX Library

A library of useful functions to ease working with AJAX and JSON.

Demo

Navigation Scroll-lock

The navigation bar becomes fix to the top of the screen after scrolling down the page.

Demo

Animated Slideshow

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

Demo

Table Sorting

The contents of the table can be sorted by clicking on the headers.

Demo

Styles Library

A library of useful functions to add custom stylesheet rules dynamically.

Demo

Scrolling Thumbnails

Browsing through a long list of irregularly shaped thumbnails using scrolling controls.

Demo

CSS3 Transitions Library

A library of useful functions to ease working with CSS3 Transitions.

Demo

URL Library

A library of useful functions to ease working with URL query parameters.

Demo

Tile Based 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.

Demo

Pan and Zoom an Image

Pans and zooms images while loading additional detail on the fly.

Demo