Home arrow DHTML arrow Page 3 - Adding More Features to Sliders with the Scriptaculous Framework
DHTML

Adding More Features to Sliders with the Scriptaculous Framework


As you probably know, the Scriptaculous animation framework comes equipped with a module for building DHTML-based sliders. If you want to learn how to include these controls in your own web pages, start reading this article now! Welcome to the final part of the series that began with "Using sliders with the Scriptaculous framework." Comprised of two tutorials, this series gets you started quickly using these powerful DHTML controls, and shows you how to incorporate them into your existing web-based graphical interfaces.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 16
May 01, 2007
TABLE OF CONTENTS:
  1. · Adding More Features to Sliders with the Scriptaculous Framework
  2. · Coding an improved horizontal slider
  3. · Building a slider with predefined offset values
  4. · Improving the functionality of basic sliders

print this article
SEARCH DEVARTICLES

Adding More Features to Sliders with the Scriptaculous Framework - Building a slider with predefined offset values
(Page 3 of 4 )

As you'll certainly recall from the previous section, the Scriptaculous JavaScript library also allows us to easily build DHTML-based sliders that are capable of moving across their sliding track at predefined offset values. This can be quite useful in certain cases where a user interface of a given web application requires this handy feature.

Naturally, this helpful characteristic can be rapidly implemented by inputting some extra parameters to the "Control.Slider" object that I used with previous examples. This implies that creating a slider that uses predefined offset values is a process closely identical to the ones demonstrated in prior sections of this tutorial.

To understand more clearly how this brand new slider works, have a look at the following image, which shows this DHTML control in action.

Having said that, here's the picture in question:

After seeing the above screen shot, you'll have to agree with me that the Scriptaculous package makes it really easy to create sliders that use a predefined range of offset values. Nonetheless, if you're anything like me, you may want to examine a concrete hand-on example that demonstrates how to include this type of slider into a sample web page.

So, bearing in mind this possibility, below I coded a simple (X)HTML file that precisely displays the aforementioned DHTML control. Its source code 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 horizontal slider with predefined offset
values</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,range:$R
(0,200),values:[0,50,100,150,200],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: 200px;
     height: 6px;
     background: #ccc;
 
}

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

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

If you study the above example, you'll see that building a slider that utilizes predefined offset values is only a matter of specifying the corresponding offset range, via the respective $R function (please remember that this function comes bundled with the Prototype library), in addition to indicating how these offset values will be displayed when moving the slider. Of course, this last process is achieved by using a "values" parameter, which is passed to the already familiar "Control.Slider" object. Quite simple, isn't it?

So far, so good. At this stage I showed you how to incorporate some useful features into the basic set of sliders that come packaged with the Scriptaculous animation framework. Therefore, the question here is: what comes next?

Well, since I'm assuming that you already learned the process of working with these handy sliders, the last section of this article will show how to expand the existing functionality of these controls, by adding to them a simple but useful progress bar.

Want to see how this will be achieved? Keep reading.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials