Tag Archive: Javascript

Sisyphus – Autosave Forms with Local Storage

on May 7, 2012 in Development, Forms

Sisyphus is a lightweight(4.5 kb) jQuery plugin that uses local storage to auto save forms and prevents data that has not been submitted from being lost in the event of a power failure or a browser crash.

Optionally, the plugin allows you to customise how frequently the form is saved and to specify any fields excluded from saving.

There are also three callback functions that allow you to perform your own operations when a form is saved, a form is restored and when the form is freed of previously stored data.

Sisyphus - Autosave Forms with Local Storage

jOrgChart – jQuery Organisation Chart

on May 3, 2012 in Chat, Development

jOrgChart is a jQuery plugin that displays a hierarchical organisational chart from a html list structure.

It features drag and drop but this requires the jQuery UI library and there doesn’t seem to be a built in method to save the updated tree structure.

The chart can be styled with css and each node can be collapsed & expanded by clicking on it.

jOrgChart - jQuery Organisation Chart

jQuery Auto Suggest Plugin

on May 2, 2012 in Autocomplete, Development

Auto Suggest is a lightweight (6kb minified) jQuery auto-complete plugin with lots of features.

The plugin features over 25 options and callbacks and is styled using only css which makes it one of the most customisable auto-complete plugins available.

Data can be created as an object or loaded via ajax from a URL which is processed server side.

Keyboard support to make a new selection is also provided in the latest version.

jQuery Auto Suggest Plugin

Simplify AJAX with AjaxML

on April 24, 2012 in AJAX, Development

AjaxML is a jQuery plugin that makes it super simple to create ajax requests by reducing the amount of code that has to be written.

Much of the code is written as an extension to HTML by adding new attributes to elements but because of this, if your using strict xhtml, your pages are not going to validate to w3c guidelines.

The plugin has many features including:

  • events for starting, during and a successful completion of a request as well as error handling
  • various methods of inserting into a target element such as before, after, replace and into
  • passing parameters
  • ability to process requests on all types of form controls including file uploads
  • form validation to prevent the form from being submitted
  • putting each request in to the browser history

Currently, only html can be returned in the request, but development is currently being done to also return json and xml.

Simplify AJAX with AjaxML

GFX – jQuery CSS3 Animation Library

on April 23, 2012 in CSS, Development, Effects

GFX is a jQuery library for easily creating CSS3 transitions programatically.

Currently, only webkit browsers are supported which makes this plugin ideal for use in mobile web development.

The syntax for creating an animation is $("#element").gfx(properties, options) where the properties can be any CSS you want to transition. In the options you can specify the duration of the animation, easing effect, queuing the animations and a callback for when the animation completes.

GFX currently has five built-in transitions available (Explode Out, Explode In, Blip, Fade In and Fade Out).

In addition, there are three plugins to support GFX – Overlay, Flip and Cube. Overlay is a light box effect which displays some content above an overlay. Flip is a method of flipping between two elements with a nice effect. Cube will rotate up to six faces in the style of a cube.

Sone nice tutorials and examples are provided here but remember to view them in a webkit browser.

GFX - jQuery CSS3 Animation Library