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:

/ 7

April 24, 2007

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

Using Sliders with the Scriptaculous Framework - Using additional parameters with the Control.Slider object
(Page 4 of 4 )

As I explained earlier, the final example that I’m going to show you in this first article of the series is aimed at demonstrating how to include a more sophisticated slider into a web document. Here, when I say the term "sophisticated," what I mean is that it’s possible to code a DHTML control that displays offset information whenever the respective handle is released across its sliding track.

Quite possibly the above description sounds a bit confusing, so below I included a concrete example which illustrates in a friendly fashion how to incorporate this improved slider into a simple web page.

The corresponding code sample is as follows:

<!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 vertical slider with offset information</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:'vertical',minimum:0,maximum:200,alignY:0,onSlide:function
(v){$('slidervalue').innerHTML='slide value:
'+v},onChange:function(v){$('slidervalue').innerHTML='changed
value: '+v}});
}
Event.observe(window,'load',initializeSlider,false);
</script>
<style type="text/css">

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

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

#handle{
   width: 12px;
   height: 8px;
   background: #f90;
}

#slidervalue{
   font: normal 11px Verdana, Arial, Helvetica, sans-serif;
   color: #000;
}
</style>
</head>
<body>
<h1>Example of vertical slider with offset information</h1>
  <div id="slider">
    <div id="handle"></div>
</div>
<div id="slidervalue"></div>
</body>
</html>

If you examine the source code that corresponds to the above example, you’ll see that I used the same "Control.Slider" object that you learned in the prior examples. In this case, I'm using it to code a slider that displays its offset values. Of course, the most interesting thing to notice here is the definition of two callback functions, which are called when the slider is moving across its track, and when it stops sliding.

These brand new parameters taken by the "Control.Slider" object provide web developers with the capacity to perform different tasks according to the movements of the slider in question.

To dissipate any eventual doubts on how these callback functions work, below I included a screen shot that shows the slider displaying different offset values.

That being said, take a look at the following image:

All right, I believe that the previous picture should be explicit enough to clarify any possible questions on how this DHTML slider works. However, if you still feel that there are some gaps in your knowledge about using the sliders bundled with the Scriptaculous framework, I suggest you try playing with all the hands-on examples shown in this tutorial. And finally, don’t forget to download the source files corresponding to this JavaScript library from its official web site located at: http://www.script.aculo.us. The experience is really fun, trust me!

Final thoughts

In this first article of the series, I walked you through the process of coding some basic sliders that come packaged with the Scriptaculous animation framework. As you saw, this process is really straightforward, since all you have to do is work with its powerful "Control.Slider" object. Period.

Nevertheless, I’m only scratching the surface when it comes to working with these handy DHTML sliders. They offer many more options, which will be properly covered in the final part of the series. Now that you’ve been warned, you won’t want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.