The functions

There are a large range of functions available in Performer. See below for a list:

Each function below has a description of what it does and a simple example with code. See the documentation of each function for full details.


These functions allow you to modify the styling of elements - whether they are visible or invisible, their size and more.


Hider makes an element invisible when the page is loaded

The numbers from 3 to 6 in this list will be hidden when the page loads: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10


Shower makes an element visible when the page is loaded.

This paragraph will only be shown to visitors with JavaScript enabled.


Toggler toggles the visibility of an element.

Click this link to view more text

Here is some more text.


GroupToggler toggles the visibility of any elements with a given CSS class.

Click this link to toggle odd numbers Click this link to toggle even numbers

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6


Switcher switches the visibility of two elements.

Switch the visibility of the two elements Element 1 Element 2


Sizer allows you to change the size of an element.

30px higher, 10px shorter and thinner

The element to resize


Styler allows you to set a CSS style on an element.

Style the paragraph

The element to style


Morpher allows you to animate a visual change on an element using CSS.

Morph the paragraph

The element to morph


These functions allow you to manipulate the text in your page.


Truncator allows you to limit the amount of text shown in an element, with a link to expand the full text.

This is the really, really long text to truncate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis erat, pulvinar eget, gravida in, lacinia quis, est. Mauris libero risus, dignissim sed, venenatis ornare, fringilla eget, tellus. Donec eget est. Sed euismod. Nullam pretium ultricies est. Maecenas ultrices commodo tortor. Fusce sodales convallis tortor. Aliquam malesuada lobortis enim. Pellentesque dui est, consequat venenatis, egestas nec, varius id, felis. Curabitur egestas mi. Vivamus viverra augue hendrerit ligula. Curabitur pellentesque molestie nibh. In leo. Cras feugiat. Nulla facilisi. Phasellus aliquam arcu quis massa. Vivamus a velit. Aenean tincidunt, ante at congue ornare, orci est sodales purus, sit amet dictum purus lorem in lectus. Nulla vehicula erat non orci. Donec tristique. Vestibulum est augue, suscipit ut, pulvinar sed, pretium consectetur, eros. Cras non magna. Vivamus consectetur posuere sapien. Quisque diam mi, luctus vel, viverra vel, scelerisque eu, nisl.


Editor allows you to click on an element and turns it into an inline-form where you can edit the text.

Click this text to edit it, with buttons

Click this text to edit it, without buttons

General functions

These are general functions to help you use JavaScript more easily.


Hooker allows you to set event handlers on any element, listening for specific events and running a function of your choosing.



Debugging Performer

Sometime things don't work as expected, so Performer has a debugging system built in. Just add the performer-debug CSS class to any element to turn it on, like this:

<body class="performer-debug">

Or you can switch it on my adding the class toggle-performer-debug to any link, like this:

<a href="#" class="toggle-performer-debug">Debug</a>

Test it: Debug

These are functions to help people navigate around your website.


Tabber allows you to show or hide the content of one of a group of items, very useful for 'tabbed' interfaces.

This is tab 1

This is tab 2

This is tab 3


Accordianer allows you to show or hide one of a group of items whilst hiding the others, known as an accordian control.


Looper allows you to move backwards and forward (or to the beginning and end) of a list of items, showing the current item.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Move back, Move forward, Move to first, Move to last


Pager allows you to paginate children of an element to split up long lists.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17


Popper opens a pop-up window with properties such as width, height, whether to show the address bar etc. set by you.

Search the web using Google


These are functions designed to help you give information to people viewing your website.


ModalWindower opens a 'modal' window: this is a window centered in the middle of the browser, optionally dimming the rest of the page.

Click here for a modal window


ContextMenuer allows you to show a custom context menu when someone right-clicks while on an element.

Right-click here for a content menu


These are functions to help you load data from remote web pages easily.


Loader loads the content from a remote page into an element.

Load page


Loader loads the content from a remote page into a hidden element then shows the element.

Click this link to view more text


ReLoader loads the content from a remote page into an element repeatedly after a delay set by you.


PreLoader loads the content from a remote page into an element when the page is first loaded.

Wait, loading the time...


Submitter submits a form to a remote page and displays the content of the page in an element.


Deleter allows you to send an AJAX request to a remote page (with an optional confirmation), then remove an element from the page and replace it with the response from the AJAX request.

Delete paragraph 1

This is paragraph 1

Delete paragraph 2 with a confirmation

This is paragraph 2


These functions help you to manipulate and use forms that your website visitors can interact with.


Focusser focusses the cursor in a form element when the page is loaded.


Duplicator duplicates an element (and all its children) and pastes the duplicate below the original. This is very useful when offering website users the ability to add, for example, extra form fields.

Duplicate the text


SubmitLocker disables all submit buttons in a form when the form is submitted. This helps you protect your system from eager user who like to click buttons several times if they don't get an instant response.


Setter allows you to set the value of a form field.

Set the value of the text field

Set the value of the select list


Prompter shows some prompting text when a text field is empty.


Limiter limits the number of characters that can be entered in a text field.



PasswordChecker checks the strength of an entered password.


Matcher checks that two text fields have the same value, useful for verifying passwords or email addresses.

Please ensure your passwords match


Selector sends the selection chosen from a drop list and sends it to a remote page, and displays the content of the page in an element.

Awaiting selection...


Resizer automatically resizes a textarea element as your cursor reaches the bottom of the element.