Back in Blog

Last night's WordPress Workshop at Indy Hall really got me motivated to start sharing more of my getting-bigger-and-better-each-day know how. The event was great - there was a nice sized turnout, many good q's, and some local experts eager to share their knowledge. Can't wait to see how it develops!

So i've been working alot with JavaScript lately, and although i'm far from actually knowing the language, i've had some pretty good luck creating killer effects using JavaScript libraries. Scriptaculous has been on my radar for some time now, but no matter how much I looked at the documentation, I just didn't get it. It turns out that the amazing effects are very simple to achieve, and i'd like to share that lightbulb moment for how to begin using JavaScript Effects.

1) First, download Scriptaculous.
2) Link to the JavaScript files that you just downloaded in the HEAD section of your webpage. The code will look something like this:


3) Next, find an effect that you like in the effects engine. My favorite place to browse these is in the Scriptaculous Wiki.
4) To apply an effect you need to do two things - First, you need to assign an id to the element that will have the effect applied to it, and second you will need to create an event that triggers the effect. If desired, the element that is displaying the effect can also be the element that triggers the effect. Let's look at the code first, then some examples.

CODE: Looking at the effect 'BlindUp' we see that the effect is called with this function:

So what that bit of code says is 'apply the BlindUp effect to the element with id="my_element"'. An element that you apply the effect to can be almost any HTMLelement, the most common ones being DIV IMG SPAN, etc.
Now that you have an effect defined for an element, you will need to define an action to trigger that event. Its EASY! Any HTML element can have an action as one of its properties. Common actions are onmouseover, onmouseout, onclick, etc. Any good HTML editor (even Dreamweaver) will give you code hinting to show which actions can be defined for an element. Or you can see a full list at the W3C Schools.

To give assign an element an action, all you do is list it in the opening tag, in EXACTLY the same way that you assign an ID and other properties like WIDTH and HEIGHT. Here is how you would assign an action to a DIV:

EXAMPLES
So to put it all together, you will place the function that we defined above which applies an effect to an element inside the event trigger like this:


The above code would cause a blind up effect for an element with an id of 'my_element' (which might be an image for example) each time there is a click on the DIV with an id of 'trigger'. You could also assign an effect to the same DIV, which would look like this:


Meaning that each time there was a click on the DIV with an id of trigger, it would fold-up with the BlindUp effect.

So there you go! Step-by-step directions for implementing Scriptaculous JavaScript effects.

Using a library such as this one makes it extremely easy to use JavaScript with your web page designs to being to build interactive elements - even if you don't know the language. Of course, this stuff is extremely addictive, so if you're anything like me, once you see it up-and-running you will just want to build more and more complex interfaces. Unfortunately there's no four-step tutorial for that...