Home arrow DHTML arrow Page 2 - 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 - Coding an improved horizontal slider
(Page 2 of 4 )

As I stated in the introduction of this article, the Scriptaculous library allows you to easily create sliders that are capable of displaying additional information aside from the basic elements, such as the handles themselves and the sliding tracks. In this case, by using the already familiar "Control.Slider" object that you learned in the previous tutorial, along with a few extra input parameters, it's possible to build sliders that display offset information.

To be even more illustrative, the look and feel of this brand new kind of DHTML control is shown in the screen shot below:  

In this case, the previous image depicts the visual appearance of a horizontal slider, which also displays offset data. However, I'm pretty certain that you want to see the pertinent source code that renders this specific type of slider, so below I included a hands-on example which displays the horizontal slider that you saw in the previous picture.

Here is the code listing: 

<!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 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:'horizontal',minimum:0,maximum:200,alignX: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: 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 offset information</h1>
 
<div id="slider">
   
<div id="handle"></div>
 
</div>
 
<div id="slidervalue"></div>
</body>
</html>

As you can see, building an horizontal slider that shows offset values is indeed a straightforward process. The operation is reduced to calling the appropriate callback functions with the respective "onSlide" and "onChange" handlers. Logically, these callback functions are passed in as additional parameters to the "Control.Slider" object used previously, which demonstrates the remarkable versatility of the object in question.

Okay, now that you know how to code a horizontal slider capable of displaying offset information, it's a good time to learn how to create sliders that move the respective handles at predefined offset intervals.

This will be a really instructive experience. If you want to see how these DHTML controls will be built, please click on the link that appears below and 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