Home arrow DHTML arrow Page 3 - Using Sliders with the Scriptaculous Framework
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
April 24, 2007
TABLE OF CONTENTS:
  1. · Using Sliders with the Scriptaculous Framework
  2. · Coding a basic vertical slider with the Scriptaculous framework
  3. · Coding a horizontal DHTML slider
  4. · Using additional parameters with the Control.Slider object

print this article
SEARCH DEVARTICLES

Using Sliders with the Scriptaculous Framework - Coding a horizontal DHTML slider
(Page 3 of 4 )

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.


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials