Home arrow DHTML arrow Page 4 - 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 - Improving the functionality of basic sliders
(Page 4 of 4 )

In consonance with the concepts that I expressed in the previous section, I'm going to demonstrate how to create a couple of regular sliders which also display a basic progress bar.

Logically, this progress bar can be useful only in limited situations, but the purpose of showing the respective examples is to demonstrate how to take advantage of the handy "onSlide" and "onChange" handlers that are accepted by the "Control.Slider" object used in all the examples that you learned before.

Please take a look at the following pair of code listings. The first one shows how to include an horizontal slider that also displays a simple progress bar, while that the second example demonstrates the same situation using a vertical control.

The examples are accompanied by two additional screen shots, which hopefully will help to clarify even more how these improved DHTML sliders work.  

<!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 progress bar</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',{range:$R
(0,20),values:
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
onSlide:function(v){$('slidervalue').innerHTML='slider value:
'+v; $('progressbar').style.width=(v*2)+'px';},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;
 
}

  #progressbar{
     width: 0;
     height: 8px;
     background: #f90;
     margin-top: 10px;
     border: 1px solid #999;
 
}
</style>
</head>
<body>
 
<h1>Example of horizontal slider with progress bar</h1>
 
<div id="slider">
   
<div id="handle"></div>
 
</div>
 
<div id="progressbar"></div>
 
<div id="slidervalue"></div>
</body>
</html>

<!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 progress bar</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',alignX:0,range:$R(20,0),values:
[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
onSlide:function(v){$('slidervalue').innerHTML='slider value:
'+v; $('progressbar').style.width=(v-2)+'px';},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;
     margin-top: 10px;
 
}

  #progressbar{
     width: 20px;
     height: 8px;
     background: #f90;
     margin-top: 10px;
     border: 1px solid #999;
 
}
</style>
</head>
<body>
 
<h1>Example of vertical slider with progress bar</h1>
 
<div id="slider">
   
<div id="handle"></div>
 
</div>
 
<div id="progressbar"></div>
 
<div id="slidervalue"></div>
</body>
</html>

As shown above, the implementation of a basic progress bar along with the corresponding slider is only a matter of including an additional DIV into a sample web document, where the width of this containing element is modified as the slider moves across its sliding track.

As usual with many of my articles on web development, feel free to modify all the hands-on examples shown here. This will help you understand more quickly how to use include these simple yet powerful sliders into your own web-based user interfaces. Happy coding!

Final thoughts

That's all for now. In this two-part series, I walked you through the basics on how to use the set of DHTML sliders that come integrated with the Scriptaculous animation framework. If you're thinking about incorporating this type of web-based control into the front end of your existing or future web applications, this library might be a good option.

See you in the next web development tutorial!


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.

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