DHTML Yellow Fade Technique
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.
