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
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
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
Navigation
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
Accordianer
Accordianer allows you to show or hide one of a group of items whilst hiding the others, known as an accordian control.
-
Accordian item 1
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
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.
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.
ContextMenuer
ContextMenuer allows you to show a custom context menu when someone right-clicks while on an element.
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.
ToggleLoader
Loader loads the content from a remote page into a hidden element then shows the element.
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.
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.
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.
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.
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.