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

Responsive Carousel

A slideshow and product slider that adapts to various screen sizes.

Demo

Scanned Print Media Viewer

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

Demo

Filter by Categories

Applies additive filters to a generic collection of content items.

Demo

Colour Picker

An alternative for the HTML5 color input element.

Demo

Conveyor

A lightweight product slider that adapts to various screen sizes.

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

Cross-fading backgrounds

Cross-fades between several different backgrounds.

Demo

Date Picker

An alternative for the HTML5 date input element.

Demo

Rotating Dial

A dial for setting a rotation property.

Demo

Dismiss Modals

Close modals by clicking elsewhere.

Demo

Event library

A collection of tools for working with event handlers.

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

Picture Framer

A visual touch interface for generating framing coordinates.

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

Generic Icon Fonts

Make generic icon fonts easy to work with.

Demo

Gestures Library

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

Demo

Grid Filter

Filters items arranged in a grid by category.

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

HTML to DOM

Convert imported text into HTML DOM elements.

Demo

Image Fallback

Replace missing (inline) images with a placeholder.

Demo

Informer

Reports when the document is updated. (See the console)

Demo

Inline SVG

Insert external images as embedded SVG.

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

In View

Makes a page element react to being in view.

Demo

Local Map

Plots GPS data on an interactive offline map of the local area.

Visit sydneytrainwalks.com or sydneyhikingtrips.com for a practical application of this library.

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

Projected Panoramic Image (DEPRECATED)

Displays a rotating projection of a panoramic image.

This limited proof of concept is depricated in favour of useful-photocylinder.

Demo

Parallax Backgrounds

Position and load backgrounds based on screen position.

Demo

Photo Cylinder

Displays a cylindrical projection of a panoramic image.

Demo

Photo Map

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

Demo

Projected Spherical Image

Displays a spherical projection of a panoramic image.

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

Form Poster

Submit a form asynchronously and cross domain.

Demo

Filter Sort

Filter and sort a list of flexible product cards.

Demo

Products Slider

A responsive products slider.

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

Spinner

A touch controlled product spinner with inertia.

Demo

Spin Toy

A spinning animation to attract attention.

Demo

Styles Library

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

Demo

Teleport DOM elements

Move elements between containers based on screen size.

Demo

Simple scrolling testimonials

Turn a list of testimonials into a slideshow.

Demo

Scrolling Thumbnails

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

Demo

Tiered Filtering

Applies tiered filters to a generic collection of content items.

Demo

Collapsible Content

A collapsing "accordion" list to be used as an FAQ.

Demo

CSS3 Transitions Library

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

Demo

Animations Triggered by Scrolling

Elements that change their appearance when scrolled into view.

Demo

Type Out

Reveals text through an typing animation.

Demo

Update Hook

Add handlers to document updates. Check the results in the console.

Demo

URL Library

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

Demo

Efficient embedded video

Embedded video that doesn't cause traffic until clicked.

Demo

Viewbox

Modify the style of elements and trigger animations based on screen position.

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

Wait for It

Waits for an element to start existing.

Demo

Wider than Column

Let a section break out of the width restriction of a column.

Demo

Pan and Zoom an Image

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

Demo