The nutshell

Ever wanted to put those really great effects on your website, but didn’t know how to start? Yeah, so have we. That’s why we wrote Performer – to take away the pain.

AJAX, toggling visibility, form and password checking, tabbing, inline editing and more. We’ve got it all. Check out all the features here, or download Performer here to get started.

Use your favourite JavaScript library

Supported JavaScript libraries

Performer supports these JavaScript libraries: jQuery, Prototype, script.aculo.us (requires Prototype) and MooTools.

The nitty gritty

Performer is a set of JavaScript functions which aims to abstract away the complexity inherent in JavaScript libraries such as jQuery, Prototype and MooTools. We don’t aim to replace these libraries – they do a fantastic job and are very much needed – but we do aim to make it easier to use the features they afford website developers.

Performer does this by allowing developers to use nothing more than CSS classes and standard element attributes (like href) to trigger these features. Here’s a simple example:

The simple example: Toggler

Let’s say you want to allow users to toggle the visibility of a certain element, like a “Advanced settings” section of a form. Just add a link:

<a href="?view=advanced">View the advanced section of the form</a>

Then make sure your target element has an ID attribute (this one also has a class of ‘note’), and set it to be hidden by default by adding the ‘hider’ class:

<div id="advancedsection" class="note hider"><h2>Advanced Section</h2>...

Then set the link to be a toggler by adding the ‘toggler’ class, and put which element ID to toggle in the targetEl CSS parameter:

<a href="#" class="toggler targetEl-advancedsection">View the advanced section of the form</a>

Here’s what you get:

View the advanced section of the form

Advanced Section

This is the advanced section.

That’s it! All the Performer functions use a similar syntax, so you can make your web pages *do* things without writing a single line of JavaScript. For more details on this example see the getting started section.