Documentation

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.

Styling

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

Hider

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

Shower makes an element visible when the page is loaded.

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

Toggler

Toggler toggles the visibility of an element.

Click this link to view more text

Here is some more text.

GroupToggler

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

Switcher switches the visibility of two elements.

Switch the visibility of the two elements Element 1 Element 2

Sizer

Sizer allows you to change the size of an element.

30px higher, 10px shorter and thinner

The element to resize

Styler

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

Style the paragraph

The element to style

Morpher

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

Morph the paragraph

The element to morph

Text

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

Truncator

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

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

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

Keypress

Change

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

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

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

Looper

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

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

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

Notification

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

ModalWindower

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

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

Right-click here for a content menu

Tooltipper

Example using 'title' attribute

Example using a hidden element

Tooltip

This is the hidden element

AJAX

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

Loader

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

Load page

ToggleLoader

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

Click this link to view more text

ReLoader

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

PreLoader

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

Wait, loading the time...

Submitter

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

Deleter

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

Forms

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

Focusser

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

Duplicator

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

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

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

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

Limiter

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

FormChecker

PasswordChecker

PasswordChecker checks the strength of an entered password.

Matcher

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

Please ensure your passwords match

Selector

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

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