Advanced Javascript

In this chapter we are going to attach a Moo.FX action to an element on the page.

Step 1

Install the Moo.FX package into your project. See Installing Packages.

Step 2

Open or create a simple page for us to work on.

Step 3

Add the Moo.FX JavaScript library to your page using the 'Page Attributes' panel. Dismiss Page Attributes by pressing Done.

Step 4

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 5

Now use the Inspector to give the new Div a colour, this can be anything you like, it's just so you can see the Div when you preview it.


Now give the Div an ID, this can be done with the contextual menu in Flux, select the Div, and click the right mouse button (Ctrl-Click on laptop Macs). Now enter a new ID for the element in the menu, this can be any name you like but should not include spaces.

Step 6

We can use one of the effects from Moo.FX on this element, by using the Actions palette. To use the Actions palette you need to take the following steps:
  1. Choose 'MooFX' as your toolkit in the top left of the Actions palette.



  2. Choose 'Fx.Style' as the class to use.
  3. Now for the ID of the element, choose or type in the ID you gave your new Div.
  4. Now choose 'height' for the property you want to change.
  5. Now choose to encapsulate this with a method call of 'start'
  6. Now in the code editing area, you can change the values in the start() method to reflect the height of your Div, and the height you want to change to.

  7. (new Fx.Style('mybox', 'height', { })).start(500,100);

  8. Now you can attach this action to the selected element and preview your page.



Done!

You've now attached a JavaScript action, so you can now try it out in the Preview mode. When you click your Div, it should now change height with a smooth animation. MooFX provides lots of effects like this, and many are exposed through the Actions palette.