In the world of buzzwords like Web 2.0 and Ajax, everybody is trying to get a grasp on the stylish quirks you see from website to website.  Back in the tutorial Getting Ready for Web 2.0 effects with Scriptaculous we talked about firing up a JavaScript effects framework on your server for future UI and display purposes.  Scriptaculous is immensely powerful and today I'd like to show you a quick example of how this framework can make your life easier.

One ever-so-popular effect that you commonly see used across the web is the highlighting of an HTML element with a nice yellow highlight fading back to the original background.  I have recently run across some interesting techniques that individuals were using to create this effect.  I briefly skimmed over this particular tutorial in question and was absolutely amazed at the amount of effort this individual had put in to create a multiple step animation sequence for changing the background colors of a DOM element.  (Basically, somebody needs to introduce this guy to the Scriptaculous library.)

In case you're in the dark on how to create a nice Highlight effect, here's an easy manner in which to do so using the form we created in the Error Output With Scriptaculous. 

Simply find the line:

<input type="text" size="30" id="email" />

Take this line and change it to:

<input type="text" size="30" id="email" onblur="new Effect.Highlight(this, {startcolor: '#ffff00', restorecolor: 'true'})"/>

What's going on here?  Well we are using the onblur element listener to trigger JavaScript when the user moves their focus from the input box in question.  The JavaScript included in the quotation marks simple creates a new Effect called Highlight and sets a few arguments.  "this" is used to identify the HTML element we are running the effect on.  (We can use "this" since we are defining the JavaScript in-line.)  The options "startcolor" and "restorecolor" are set in the next part of the JavaScript declaration.  Using a hex code, we can tell Scriptaculous exactly what color we want the animation to start with.  The "restorecolor" parameter is handy because it will return the background color of the element to its original color without us having to worry about what the initial value was.

View Yellow Fade Technique Example. The effect will trigger when you place your cursor in the "email" box and tab to the next field or click elsewhere on the page.

Note** There are other options you can define here, refer to the official Scriptaculous documentation for more information.

With the release of the new Scriptaculous 1.7.0 Beta, Thomas Fuchs has introduced a new effect, morph.  The syntax for this new feature is quite easy to grasp.  Simply call the function on the element you wish to morph.

$('my_element').morph();

You can also pass this function arguments to define CSS properties on the fly.

$('my_element').morph({fontSize: '12px', color: '#7F1123'});

Here is an example of the Scriptaculous morph function and how it can be used.

The code I used in my example was quite simple.  I set some default values in CSS for the element I was going to morph.  Then I created some anchor text, in which I tacked on a onclick behavior that called the morph() function.  This is what my markup looks like:

<div id="change_me">Watch me morph!  Click Below!</div>
<a href="#" onclick="$('change_me').morph({fontSize:'36px',color:'#7F1123'}); return false;">Click Here</a>

The magic is primarily done in defining the initial CSS values and passing your new ones to the function.  Pretty handy!

Note– using this method requires the newest beta release of Scriptaculous.  The download is available toward the bottom of this page on mir.aculo.us.  Direct download link.

In this tutorial, Error Output with Scriptaculous, we discuss how to get a basic Scriptaculous effect up and running. This tutorial shows how to properly set up HTML markup so that JavaScript can effectively interact with the DOM and use the Effect.Appear method to display error output. This example centers around a simple login form that validates user input.

A new tutorial has been added entitled Getting Ready for Web 2.0 Effects with Scriptaculous. In this tutorial, you can gain a general overview of the Scriptaculous library for JavaScript and what it is used for. Then, the tutorial gives you detailed instructions on how to get Scriptaculous up and running on your web server. It's pretty easy so get started today!