Home >
One of the most useful script.aculo.us functions has to be the morph function. You can use it to modify a CSS style over a set period of time, making it the perfect function for creating an animated progress bar for a JavaScript based RIA.
Below is a quick example showing how to use the morph function.
In this example I begin by creating a couple of quick graphics. The first is for the progress bar and a the second is transparent gif to act as a border and a masking agent for the progress bar. The gif image is not necessary, but it does give us a quick and easy way to create rounded corners for the progress bar.
After the graphics are saved, I create a simple html page with a div for the progress bar. I'll add some CSS to style the progress bar div as follows:
.progressBar
{
width: 480px;
height: 30px;
background: url(progressBar.png) left no-repeat;
padding: 0;
margin: 0;
}
I then add a javascript reference to prototype.js and effects.js from scriptaculous.
Next, I add a dom:loaded event handler to initialize my progressbar. I also use the event to add the progress bar mask image. Then I set the background position to -480px (the length of the div). Finally I use the morph function to change the background position to 0px over a duration of 4 seconds.
below is the code:
document.observe("dom:loaded",function() {
var pb = $('sampleProgressBar');
pb.insert("<img src=\"progressBarMask.gif\" alt=\"progress bar\" />");
pb.setStyle({backgroundPosition: '-480px'});
pb.morph({backgroundPosition: '0px'}, { duration: 4 });
});






















Awesome technique ... Looking forward to reading more of these as I try to get into the RIA world from my too-traditional browser and desktop GUI world.
Well done Mr. Bierly.
Using an image mask and background image moved via JS can provide a variety of effects.
You didn't mention why the background image is positioned out of sight using JS and not CSS.