Simple Javascript

You can do many advanced effects and operations using JavaScript and Flux, but in this chapter we are going to focus on attaching a basic Javascript action to an element on the page.

Step 1

First, open or create a simple page for us to work on.

Step 2

Next, create an element to attach an action to, for example a simple div that we can create with 'Quick Div'


Make sure the Div you have just created is selected.

Step 3

Open the 'Actions' palette (⌘-5) by clicking the toolbar button below.

Step 4

As a simple example, we will attach an action to the Div that simply redirects to a new page.

From the Pop Up menu at the top left of the palette, choose 'Simple', which will select a collection of basic JavaScript functions.

From the Pop Up menu in the top right of the palette, choose 'Redirect to page', which is JavaScript function that simply takes the user to a different page (or site).

The target URL can now be typed in to the 'url' field. As you type, Flux will construct the appropriate JavaScript code.

To go to the target page when the user clicks on the Div, make sure the Event is set to onClick

Step 5

Once you are happy with your parameters, press the Attach to Selected Object button, which attaches the JavaScript to the Div we just created.

To indicate the Div has an action attached, a marker will appear on the Div.

Done!

You've now attached a JavaScript action, so you can now try it out in the Preview mode.

Deleting an action

Deleting the action

You can delete the action you just made using the Inspector in the Attributes & Actions section.