JavaScript, without the code: a Performer tutorial

I originally wrote this tutorial for Nettuts, but they (quite rightly) said I was being cheeky by writing a tutorial about software I’d written myself. So it’s here instead.

If you’re not a JavaScript blackbelt, or even if you’re still struggling on scripting training wheels, you can still use some great effects on your pages. Look here for how to use JavaScript in your pages, without writing any JavaScript code.

The Rise of the (JavaScript) Machines

Let me tell you a story. Back in the mists of time when the web was young there was HTML, which described documents. Then along came CSS, and those documents got all stylish. But they didn’t *do much*. We needed something interactive, dynamic and powerful to make our documents into living, breathing things. We needed JavaScript.

It took JavaScript (from here abbreviated to JS), once the whipping-boy of web technologies, a long time to shake off the spectres of scrolling status bar messages, obtrusive popup windows and onclick attributes. Modern JS can be clean, beautiful and well-ordered thanks to a tasty selection of libraries which separate the developer from the gnarly internals of JS, while smoothing over browser inconsistancies.

jQuery logoJavaScript has grown hugely in popularity over the last few years thanks to web applications like Google Mail, and much easier to use because of libraries like jQuery, Prototype and MooTools. These libraries make JavaScript development much simpler, but they still require you to write *some* JavaScript to get things working. What about, for your run-of-the-mill JavaScript needs, you could leverage the power of JavaScript from within your HTML code? Performer does exactly that.

Introducing Performer

Performer is a set of JavaScript functions that give you a range of effects you can use on your pages by automatically hooking-up CSS classes and events (such as clicks and keypresses). That means you can toggle the visibility of elements, create nicely-styled tooltips for links, validate forms and even do AJAX without writing a single line of JavaScript. How easy is it? This easy:

<p&gt<a href="#" class="toggler targetEl-mytarget">Toggle this!</a></p>
<p id="mytarget">Click the link and I will be hidden...&lt/p>
Performer: example 1

(See this in action)

Whoa, what happened there? Simple: Performer saw I’d given a link a CSS class of "toggler", so when someone clicks that link I want to toggle the visibility of something. The id of the thing I want to toggle is in a "CSS parameter" (more on those later) called "targetEl" with the value "mytarget". Then I added the id "mytarget" to the second paragraph and hey presto! Performer does the magic.

There’s more where that came from…

The same technique of using CSS classes to specify the what’s, where’s and how’s of your interactive stuff is used by Performer to give you loads of other features. Here’s a few examples:

Automatically pagnating a list (documentation)

Got a long list you want to split up? Performer will automatically add ‘page’ links so your visitors can go through the list without reloading the page.

<ul class="pager pagesize-5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
Performer: example 2

(See this in action)

Creating a modal window (documentation)

Want to make a window popup in a cool Web 2.0 style? Performer handles that, and loads the content for the popup window from another page on your site automatically.

<p><a href="#" class="modalwindower lightBox-true targetPage-example3modal.html">Click here for a modal window</a></p>
Performer: example 3

(See this in action)

Submit a form without reloading the page (documentation)

How about submitting a form your visitors fill in without reloading the page? Performer has that covered.

<form class="submitter targetPage-example4receiver targetElement-submitterresponse" action="#" method="post">
<p><input name="submittertext" type="text" /></p>
<p><button>Submit form</button></p>
<p id="submitterresponse">Awaiting response...</p>
</form>
Performer: example 4

(See this in action)

How does it work?

For each performer features there is a corresponding CSS class, for example "toggler" for the Toggler feature, "submitter" for the Submitter feature and so on. Performer scans the HTML of your page when it loads to find all these classes, then hooks up the relevent JavaScript functions.

Most of the Performer features need some extra options to make them work, for example to specify which element needs to be toggled. This is handled using "CSS parameters" in the format "[parameter name]-[value]", for example "targetEl-mytarget". It takes a few seconds to get used to this idea, but it’s a really neat way to give your parameters to Performer features. And you can then use the CSS parameters like normal CSS classes to style Performer-enabled element. For example:

<p&gt<a href="#" class="toggler targetEl-mytarget">Toggle this!</a></p>
<p id="mytarget">Click the link and I will be hidden...&lt/p>
a.targetEl-mytarget { color: #F00; }
Performer: example 5

(See this in action)

What else does Performer do?

Performer has a big list of features:

Styling

  • Hider: hide an element when the page is loaded
  • Shower: show a hidden element when the page is loaded
  • Toggler: toggle the visibility of an element
  • GroupToggler: toggle the visibility of all elements with a particular CSS class
  • Switcher: hide one element and show another
  • Sizer: change the size of an element
  • Styler: give an element a CSS class

Text

  • Truncator: truncate long content in an element, adding a ‘more’ link
  • Editor: make an element editable, sending the changed content to a page by AJAX

General functions

  • Hooker: hook any event (keypress, click, selection change etc) happening on an element into a custom function

Navigation

  • Tabber: creates a tabbed interface, showing one of a group of elements
  • Accordianer: creates an accordian interface, showing one in a group of elements
  • Looper: loops round a group of elements when a link is activated
  • Pager: automatically splits children of an element into multiple pages, adding links to navigate
  • Popper: opens a link in a new window

Notification

  • ModalWindower: opens a modal window with content from another page loaded by AJAX
  • ContextMenuer: gives a custom context menu on an element
  • Tooltipper: gives a custom tooltip, with content either from the title attribute or from another element

AJAX

  • Loader: loads content from another page into an element
  • ToggleLoader: loads content from another page into an element and toggles the elements visibility
  • ReLoader: automatically loads content from another page into an element every X seconds
  • PreLoader: automatically loads content from another page into an element when the page is loaded
  • Submitter: submits a form to another page then displays the receiving pages response in an element
  • Deleter: sends a request to another page and removes the target element from the page

Forms

  • Focusser: places the focus in a form element when the page is loaded
  • Duplicator: duplicates an element, useful for adding new input type="file" elements
  • SubmitLocker: locks all submit buttons when a form is submitted, to stop people pressing them twice
  • Setter: sets the value of a form field
  • Prompter: puts prompt text in a input type="text" or textarea form field when the field is empty
  • Limiter: limit the amout of text that can be entered in a input type="text" or textarea form field
  • FormChecker: check that a form has been filled in correctly (valid email addresses, required fields filled in etc)
  • PasswordChecker: check the strength of a password and display it to the user
  • Matcher: checks that two form fields, for example an email address and it’s confirmation, match
  • Selector: when the option in a select field changes, sends the option value to another page by AJAX and loads the response into an element
  • Resizer: makes a textarea field bigger when the cursor reaches the bottom

By now you should have a reasonable idea about what Performer can do. Remember to check out the documentation for a full details of all the features. It’s also written to force good practice, for example degrading nicely when javaScript is disabled or not available. All elements which use Performer features can alo be styled how you want using CSS, but Performer has some styles already built in.

And the best thing is Performer works with your favourite JavaScript library: jQuery, Prototype and MooTools are supported seamlessly. You can also download Performer in two flavours: the full file with comments, and a minified version (saving precious bytes). It’s also available as a WordPress plugin. The WordPress plugin has one extra nice feature. If you don’t use a JavaScript library in your WordPress site it’s no problem, Performer will automatically load jQuery from the Google AJAX API site.

JavaScript, without the code

So if you find yourself repeatedly reusing some JS code and thinking there must be a better way, or you don’t know how to start, Performer is for you. So this festive season make sure you wrap up warmly, spend time with family and friends, and use Performer to be full of festive cheer.

4 Responses to “JavaScript, without the code: a Performer tutorial”

  1. ruben says:

    I love performerJS… but I cannot make it work on my wordpress blog.

    If anyone could help me to explain what to do exactly it would be very nice..

    thank you a lot!

    Rub

  2. Chris says:

    Hi Ruben. Do you have a link to your website? If I can take a look at it I can see if PerformerJS is loaded OK.

  3. Jesse says:

    Hi Chris-
    Could you post the code for your “submitter” and other AJAX pages? I’m not real clear on what scripting goes into “the response from a remote page.”

  4. Chris says:

    Wow, I’m really late replying to this. The “response from the remote page” is whatever response you want to show on your page based on what the user has submitted. So if they submit a form with their name in, you might want your server to return the response “Thanks for signing up, Jesse”. How you script this is down to your server-side technology (PHP, ASP.NET, RoR etc…)