Getting started

Where to start

To use Performer you need to include it on your pages, along with one of the supported JavaScript frameworks. Download Performer here, then include it in the <head> of your page, like this:

<head>
	<title>Your page title here</title>
	<script src="path/to/framework.js" type="text/javascript"></script>
	<script src="path/to/performer-min.js" type="text/javascript"></script>
</head>

The order is important - put the JavaScript framework first, then Performer. Here I'm using the minified version of Performer, to save a few bytes. Of course you can add other things in there (like CSS files, other JavaScript files and meta data. Now, you're all set, so let's get started.

Aloha, world

Most programming languages have a simple example to get you started, normally called Hello, world!. Performer is no exception, so let's start saying hello. In this example we'll be using the Performer functions hider and toggler to show and hide an element which says Hello, world! when a link is clicked. All without a line of JavaScript.

Step 1: Creating the hello

Firstly, create a p element with the text "Hello, world!" in:

<p>Hello, world!</p>
View this example

Give it an id attribute, this is so we can find it with the toggler function:

<p id="helloworld">Hello, world!</p>
View this example

Then give it a CSS class of hider, this will hide the element using JavaScript when the page is loaded:

<p id="helloworld" class="hider">Hello, world!</p>
View this example

Step 2: Creating the toggler link

Now we need a link to toggle the visibility of our lovely message. Create a paragraph with a link in, something like this:

<p><a href="#">Toggle the message</a></p>
View this example

I've given this link a href attribute (where the link goes to) of '#', which means stay on the same page. Later on we'll see how we can create pages that work even without JavaScript using the href attribute, but for now let's leave it at that.

Now we want to give it a CSS class of toggler, that's because we want the link to toggle something:

<p><a href="#" class="toggler">Toggle the message</a></p>
View this example

And now we give it another CSS class, this time of 'targetEl-helloworld' - that's the text 'targetEl-' (short for 'target element') then the id of the element we want to toggle:

<p><a href="#" class="toggler targetEl-helloworld">Toggle the message</a></p>
View this example

And that's it! We've used nothing more than standard HTML attributes and CSS classnames and we have a link which toggles the visibility of a hello world message. See the final example here.

Now you've got the general idea, let's take things to the next level and look at Next Steps with Performer.