Scripted Aspect Ratio
Keeps the proportions of a box the same regardless of browser size.
useful.js
JavaScript examples, too useful not to share.
Responsive Carousel
A slideshow and product slider that adapts to various screen sizes.
Scanned Print Media Viewer
A viewer for browsing through and zooming in on magazine pages.
Filter by Categories
Applies additive filters to a generic collection of content items.
Colour Picker
An alternative for the HTML5 color input element.
Conveyor
A lightweight product slider that adapts to various screen sizes.
Cookies Library
A library of useful functions to ease working with cookies.
Animated Countdown Timer
Counts down to a future date using text and class names to add styling to.
Image Cropper
A visual touch interface for generating cropping coordinates.
Cross-fading backgrounds
Cross-fades between several different backgrounds.
Date Picker
An alternative for the HTML5 date input element.
Rotating Dial
A dial for setting a rotation property.
Dismiss Modals
Close modals by clicking elsewhere.
Event library
A collection of tools for working with event handlers.
File Selector
An alternative for the HTML file input element.
Data Filtering
This script allows the contents of a table or list to be filtered by keyword.
HTML5 Form Functionality
A form using HTML5 form elements, that validates both client- and server-side and stores the entries in XML.
Picture Framer
A visual touch interface for generating framing coordinates.
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.
Generic Icon Fonts
Make generic icon fonts easy to work with.
Gestures Library
A library of useful functions to ease working with touch and gestures.
Grid Filter
Filters items arranged in a grid by category.
Slideshow Banner
A simple responsive slideshow for graphical banners with touch controls.
HTML to CSS Converter
This converter parses the structure of any given piece of HTML and generates a rough empty stylesheet from it.
HTML to DOM
Convert imported text into HTML DOM elements.
Image Fallback
Replace missing (inline) images with a placeholder.
Informer
Reports when the document is updated. (See the console)
Inline SVG
Insert external images as embedded SVG.
Instances Library
A library of useful functions to ease working with instances of constructors.
Interactions Library
A library of useful functions to ease working with touch and gestures.
In View
Makes a page element react to being in view.
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.
Improvised Debug Console
Implements a debug console for use in browsers for which console messages may be inaccessible, like mobile apps and kiosk software.
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.
Ordering Lists
Order lists of results by arbitrary fields.
Projected Panoramic Image (DEPRECATED)
Displays a rotating projection of a panoramic image.
This limited proof of concept is depricated in favour of useful-photocylinder.
Parallax Backgrounds
Position and load backgrounds based on screen position.
Photo Cylinder
Displays a cylindrical projection of a panoramic image.
Photo Map
Plots the GPS data of the photos in a slideshow on a map.
Projected Spherical Image
Displays a spherical projection of a panoramic image.
Photo Wall
The script arranges collections of images into a brick pattern.
Photo Zoom
Overlays a full screen preview of a thumbnail.
Input placeholder labels
An alternative for the HTML5 input element placeholders.
Polyfills Library
A library of useful polyfills to ease working with HTML5 in legacy environments.
Screen Positions Library
A library of useful functions to ease working with screen positions.
Form Poster
Submit a form asynchronously and cross domain.
Filter Sort
Filter and sort a list of flexible product cards.
Products Slider
A responsive products slider.
Range Selector
An alternative for the HTML5 range input element.
AJAX Library
A library of useful functions to ease working with AJAX and JSON.
Navigation Scroll-lock
The navigation bar becomes fix to the top of the screen after scrolling down the page.
Animated Slideshow
This slideshow uses CSS3 transitions for smooth animations, especially on mobile devices. Using CSS3, makes it easy to customise the effect.
Table Sorting
The contents of the table can be sorted by clicking on the headers.
Spinner
A touch controlled product spinner with inertia.
Spin Toy
A spinning animation to attract attention.
Styles Library
A library of useful functions to add custom stylesheet rules dynamically.
Teleport DOM elements
Move elements between containers based on screen size.
Simple scrolling testimonials
Turn a list of testimonials into a slideshow.
Scrolling Thumbnails
Browsing through a long list of irregularly shaped thumbnails using scrolling controls.
Tiered Filtering
Applies tiered filters to a generic collection of content items.
Collapsible Content
A collapsing "accordion" list to be used as an FAQ.
CSS3 Transitions Library
A library of useful functions to ease working with CSS3 Transitions.
Animations Triggered by Scrolling
Elements that change their appearance when scrolled into view.
Type Out
Reveals text through an typing animation.
Update Hook
Add handlers to document updates. Check the results in the console.
URL Library
A library of useful functions to ease working with URL query parameters.
Efficient embedded video
Embedded video that doesn't cause traffic until clicked.
Viewbox
Modify the style of elements and trigger animations based on screen position.
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.
Wait for It
Waits for an element to start existing.
Wider than Column
Let a section break out of the width restriction of a column.
Pan and Zoom an Image
Pans and zooms images while loading additional detail on the fly.