DHTML

Using Sliders with the Scriptaculous Framework

The Scriptaculous animation framework has become popular with web developers due to its range of capabilities and its versatility. One of its more useful features is a module of DHTML-based sliders, which assist developers in creating front ends for web applications without needing to create complex JavaScript routines.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

April 24, 2007

TABLE OF CONTENTS:

In consonance with the concepts that I deployed in the previous section, coding a horizontal slider using the Scriptaculous animation framework is only a matter of working with the same "Control.Slider" object that you learned about earlier, but this time assigning a value of "horizontal " for its "axis" parameter.

If you feel curious about how this slider looks, please pay attention to the following screen shot, which clearly shows its visual appearance:

As you can see, the above image illustrates the look and feel of a simple horizontal slider. It has been coded by using the same "Control.Slider" object that you learned in the previous section. And speaking of that, below I listed the corresponding signature of an (X)HTML file that displays the slider in question, so take a look at it, please:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of horizontal slider</title>
<script language="javascript" src="js/prototype.js"></script>
<script language="javascript" src="js/scriptaculous.js"></script>
<script language="javascript">
function initializeSlider(){
new Control.Slider('handle','slider',
{axis:'horizontal',minimum:0,maximum:200,alignX:0});
}
Event.observe(window,'load',initializeSlider,false);
</script>
<style type="text/css">

h1{
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
color: #000;
}

#slider{
   width: 200px;
   height: 6px;
   background: #ccc;
}

#handle{
   width: 8px;
   height: 12px;
   background: #f90;
}
</style>
</head>
<body>
<h1>Example of horizontal slider</h1>
<div id="slider">
    <div id="handle"></div>
</div>
</body>
</html>

As shown above, the horizontal slider was coded with the same approach that was used to display a vertical one. Nonetheless, in this case the pertinent "axis" argument has a value of "horizontal," and consequently the handle’s vertical offset has been specified too, using the expression "alignX:0."

As you can see, coding vertical and horizontal sliders with the Scriptaculous framework is in fact a no-brainer process, since the procedure itself is reduced to only specifying how the control is going to behave on the web page by assigning a concrete value for its "axis" input argument.

So far, so good. At this time you hopefully learned how to include the two main types of sliders that are available with the Scriptaculous library. However, I’m not finished with this tutorial yet, since I’d like to show you another concrete example. It will demonstrate how to use some of the additional parameters accepted by the "Control.Slider" object that was discussed previously.

To see how this additional example will be created, jump ahead and visit the following section. I’ll be there, waiting for you.

Next: Using additional parameters with the Control.Slider object >>