Performer

Sets the element as being invisible. This happens when the page is loaded.

Attributes

class Required

Must be set to 'hider'.

Example

<p class="hider">This element will be made invisible when the page loads</p>

Toggles the visibility of an element. This happens when the link is clicked.

Attributes

class Required

Must be set to 'toggler'.

rel Required

Set to the id attribute of the element to be toggled.

Example

<p><a href="#" class="toggler" rel="targetelement">Toggle element</a></p>
<p id="targetelement">Target element</p>

Loads content from a remote file into an element. This happens when the link is clicked.

Attributes

class Required

Must be set to 'loader'.

rel Required

Set to the id attribute of the element to be filled.

rev Required

The URI of the remote file. Please note this MUST be on the same domain as the requesting file due to JavaScript security restrictions.

Example

<p><a href="#" class="loader" rel="targetelement" rev="targetpage.php">Load content</a></p>
<p id="targetelement">Target element</p>

Loads content from a remote file into an element. This happens when the page is loaded.

Attributes

class Required

Must be set to 'preloader'.

rel Required

The URI of the remote file. Please note this MUST be on the same domain as the requesting file due to JavaScript security restrictions.

Example

<p class="preloader" rel="targetpage.php">Load content</p>

Loads content from a remote file into an element and displays that element if it is set as invisible. This happens when the link is clicked. Used in conjunction with Hider.

Attributes

class Required

Must be set to 'toggleloader'.

rel Required

Set to the id attribute of the element to be filled.

rev Required

The URI of the remote file. Please note this MUST be on the same domain as the requesting file due to JavaScript security restrictions.

Example

<p><a href="#" class="toggleloader" rel="targetelement" rev="targetpage.php">Load content</a></p>
<p id="targetelement" class="hider">Target element</p>

Resizes an element. This happens when the link is clicked.

Attributes

class Required

Must be set to 'sizer'.

rel Required

Set to the id attribute of the element to be resized.

rev Required

A comma-separated list of the height/width to increase the size of the element by. They must be in that order; 'height,width', for example '20,10' (increases height by 20px and width by 10px). If you are specifying just the height you can leave out the comma; '50' (increases the height by 50px). If you are specifying just width you can leave out the height value entirely; ',50' (increases the width by 50px). Negative values can be used as well to decrease the size of the element.

Example

<ul>
  <li><a href="#" class="sizer" rel="targetelement" rev="20">Make the box 20px longer</a></li>
  <li><a href="#" class="sizer" rel="targetelement" rev="-20,">Make the box 20px shorter</a></li>
  <li><a href="#" class="sizer" rel="targetelement" rev=",20">Make the box 20px wider</a></li>
  <li><a href="#" class="sizer" rel="targetelement" rev=",-20">Make the box 20px thinner</a></li>
  <li><a href="#" class="sizer" rel="targetelement" rev="50,50">Make the box 50px bigger</a></li>
  <li><a href="#" class="sizer" rel="targetelement" rev="-50,-50">Make the box 50px smaller</a></li>
</ul>
<p class="box" id="targetelement">This is the target element</p>

Focusses the cursor on an element. This happens when the page is loaded. This works best with form fields.

Attributes

class Required

Must be set to 'focusser'.

Example

<p><input type="text" id="field" class="focusser" value="This field will be focussed when the page is loaded"</p>

Switches the visibility of multiple elements within a group. This happens when the link is clicked.

Attributes

class Required

Must be set to 'focusser'.

rel Required

Set to the id attribute of the tab group. A tab group MUST have an id attribute.

rev Required

Set to the id attribute of the target tab. Each tab element within a tab group MUST have an id attribute, and MUST also have a class attribute set to 'tab'. This is so Performer can decide what is a tab and what isn't. As in the example below, the Hider function can be used to hide all tabs except the one that you want to be shown by default.

Example

<ul>
  <li><a href="#" class="tabber" rel="tabgroup1" rev="tab1">Show tab 1</a></li>
  <li><a href="#" class="tabber" rel="tabgroup1" rev="tab2">Show tab 2</a></li>
  <li><a href="#" class="tabber" rel="tabgroup1" rev="tab3">Show tab 3</a></li>
</ul>
    
<div id="tabgroup1">
  <p id="tab1" class="tab">This is the text inside tab 1.</p>
  <p id="tab2" class="tab hider">This is the text inside tab 2.</p>
  <p id="tab3" class="tab hider">This is the text inside tab 3.</p>
</div>

Send the value of a select element to a remote page and loads the response into a target element. This happens when the select option is changed. Note: because of the limitations of valid attributes for select elements the parameters for this function are set in the class attribute. The value of the select element is passed to the remote page as a querystring parameter called 'selection'.

Attributes

class Required

Must be set to 'selector'.

class Required

Set an additional class name to 'targetEl-' then the id attribute of the target element. For example targetEl-targetelement.

class Required

Set an additional class name to 'targetPage-' then the URI of the remote file. For example targetPage-selection.php. Please note this MUST be on the same domain as the requesting file due to JavaScript security restrictions.

Example

<p>
  <select name="list" id="list" class="selector targetEl-targetelement targetPage-selection.php">
    <option value="List item 1">List item 1</option>
    <option value="List item 2">List item 2</option>
    <option value="List item 3">List item 3</option>
  </select>
</p>

<p id="targetelement">Target element</p>

Limit the amount of text that can be entered in a textarea or input box. This happens when a key is pressed. A separate element initially shows the total number of characters that can be entered, and the text of this element changes as more characters are used.

Attributes

class Required

Must be set to 'limiter'.

class Required

Set an additional class name to 'targetEl-' then the id attribute of the element to show how many characters are left. For example targetEl-notifier.

class Required

Set an additional class name to 'lengthLimit-' then the maximum characters that is allowed to be entered in the field. For example lengthLimit-24.

Example

<p>
  <input type="text" name="text" id="text" class="limiter targetEl-notifier lengthLimit-24" />
</p>

<p id="notifier"></p>

Opens a popup window with the settings you require. This happens when the link is clicked. The focus is set to the new window when it is opened. The href attribute of the link is used as the target URL for the popup window.

Attributes

class Required

Must be set to 'popper'.

href Required

Set to the URL you want to appear in the popup window.

rel Required

Set to the name you want for the new window. This is useful if you want separate links to load content into the same popup window, i.e. overwriting what was there previously.

rev Required

Set to the list of attributes you want your pop window to have. Here is a good list of the available attributes you can use.

Example

<p>
  <a href="http://www.google.com" rel="searchbox" rev="width=400,height=300,location=no,menubar=no,status=no,toolbar=no">Search the web using Google</a>
</p>

Changes an element into a single-line text input box in a form, so you can edit text in place. A single click or keypress on an element will turn it into a text input box.

Please note: this function does not use the rev and rel attributes so it can be used on a wide variety of textual elements (H1, H2, blockquote etc).

The value of the edited text is sent to the target page with a name equal to the id attribute you give to the original element. So if you give the editable text an id of 'editabletext' you can access it in your target page using <?php print $_POST["editabletext"]; ?> (in PHP).

A class of "performer-editor" is applied to the editor form. You can use this to set the display properties of the form.

Attributes

class Required

Must be set to 'editor'.

class Required

An additional class must be set with the text targetPage- then the location of the page that will receive the sent form, for example targetPage-savetext.php. This target page could be relative (as in this example, or absolute like http://www.mysite.com/savetext.php.

Example

<p id="editabletext" class="editor targetPage-savetext.php">This is the text I will edit</p>

Adds a piece of text to an input text box or textarea element that prompts users to type in the correct data. When the element has focus (the cursor is in the box) then the message disappears, when the elelment loses focus (the user moves to another element on the page( the message returns if nothing has been typed in.

This function will only work on input type="text" and textarea elements.

A class of "performer-prompter" is applied to the textarea when the prompt is being shown. You can use this to set the text colour of the prompt to one of your choosing. In the example the prompt colour is set to grey.

Attributes

class Required

Must be set to 'prompter'.

title Required

Set to the text you want to be prompted, for example "Please enter your full name".

Example

<p><input id="fullname" name="fullname" class="prompter" title="Please enter your full name" /></p>

Checks the strength of a password as it is typed into a text box, showing a message about the strength of the password in a separate notification element. The strength is determined like this:

1. Failed passwords are less than 6 characters in length
2. Weak passwords are 6 characters or more, but contain only letters
3. Acceptable passwords are 6 characters or more and contain letters and numbers, or are 10 characters or more and contain only letters or only numbers
4. Strong passwords are 6 characters or more and contain letters, numbers and at least one special character ($, £ etc)

For full details see the Performer source code.

This function will only work on input type="text" elements.

Several CSS classes are applied to the notification element depending on the strength of the password. These classes are:

• password-fail
• password-weak
• password-ok
• password-strong

Attributes

class Required

Must be set to 'passwordchecker'.

class Required

An additional class must be set with the text notifyEl- then the ID of the element that will display the message, for example notifyEl-passnotify.

name Required

Set to the name of the text box.

Example

<p><input type="password" id="pass" name="pass" class="passwordchecker notifyEl-passnotify" /><br /><span id="passnotify"></span></p>;

Checks the values of two text boxes and displays a message saying whether they match in a notification element.

This function will only work with two input type="text" elements.

Attributes

class Required

Must be set to 'matcher'.

class Required

An additional class must be set with the text matchEl- then the ID of the element that you want to be compared to this element, for example matchEl-pass2.

class Required

An additional class must be set with the text notifyEl- then the ID of the element that will display the message, for example notifyEl-passmatch.

Example

<p><input type="password" id="pass1" name="pass1" /></p>

    <p><input type="password" id="pass2" name="pass2" class="matcher notifyEl-passnotify matchEl-pass1" /><br /><span id="passnotify" class="error hider">Your passwords do not match</span></p>