Slider for Dynamic Applications using script.aculo.us (part 1)

Exclusive offer: get 50% off this eBook here
PHP and script.aculo.us Web 2.0 Application Interfaces

PHP and script.aculo.us Web 2.0 Application Interfaces — Save 50%

Build powerful interactive AJAX applications with script.aculo.us and PHP

$20.99    $10.50
by Sridhar Rao | October 2009 | AJAX PHP Web Development

Handling, processing, and representing data in the 2.0 era of web applications has become so crucial that designers and programmers are working towards new ways of improving the user interface experience. Slider is one such killer concept, using which the user can represent and handle data easily. In this two-part article series we will explore different types of Sliders and code usage and options with a hands-on example with vertical and horizontal slider.

In this article by Sridhar Rao, we shall be covering the following topics:

  • First steps with the script.aculo.us slider
  • Types of the slider
  • Code usage for the slider

Before we start exploring the slider, let me try to give you a complete picture of its functionality with a simple example.

Google Finance uses a horizontal slider, showing the price at a given day, month, and year. Although this particular module is built in Flash, we can build a similar module using the script.aculo.us slider too. To understand the concept and how it works, look at the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

Now that we have a clear understanding of what the slider is and how it appears in UI, let's get started!

First steps with slider

As just explained, a slider can handle a single value or a set of values. It's important to understand at this point of time that unlike other features of script.aculo.us, a slider is used in very niche applications for a specific functionality.

The slider is not just mere functionality, but is the behavior of the users and the application.

A typical constructor syntax definition for the slider is shown as follows:

new Control.Slider(handle, track [ , options ] );

Track mostly represents the <div> element. Handle represents the element inside the track and, as usual, a large number of options for us to fully customize our slider.

For now, we will focus on understanding the concepts and fundamentals of the slider. We will surely have fun playing with code in our Code usage for the slider section.

Parameters for the slider definition

In this section we will look at the parameters required to define the slider constructor:

  • track in a slider represents a range
  • handle in a slider represents the sliding along the track, that is, within a particular range and holding the current value
  • options in a slider are provided to fully customize our slider's look and feel as well as functionality

It's time to put the theory into action. We need the appropriate markup for working with the slider. We have <div> for the track and one <div> for each handle. The resulting code should look like the snippet shown as follows:

<div id="track"><div id="handle1"></div></div>

It is possible to have multiple handles inside a single track. The following code snippet is a simple example:

<div id="track"><div id="handle1"></div>
<div id="handle2"></div></div>

Options with the slider

Like all the wonderful features of script.aculo.us, the slider too comes with a large number of options that allow us to create multiple behaviours for the slider. They are:

  • Axis: This defines the orientation of the slider. The direction of movement could be horizontal or vertical. By default it is horizontal.
  • Increment: This defines the relation between value and pixels.
  • Maximum: This is the maximum value set for the slider to move to. While using a vertical slider from top-to-bottom, the bottom most value will be the maximum. And for a horizontal slider from left-to-right, the right most value will be the maximum value.
  • Minimum: This is the minimum value set for the slider to move to. While using a vertical slider from top-to-bottom, the top most value will be the minimum. And for a horizontal slider from left-to-right, the left most value will be the minimum value approach for horizontal slider.
  • Range: This is the fixed bandwidth allowed for the values. Define the minimum and maximum values.
  • Values: Instead of a range, pass a set of values as an array.
  • SliderValue: This sets the initial value of the slider. If not set, will take the extreme value of the slide as the default value.
  • Disabled: As the name suggests, this disables the slider functionality.

Some of the functions offered by the slider are:

  • setValue:This will set the value of the slider directly and move it to the value position.
  • setDisabled: This defines that the slider is disabled at runtime.
  • setEnabled: This can enable the slider at runtime.

Some of the callbacks supported by the slider are:

  • onSlide: This is initiated on every slide movement. The called function would get the current slider value as parameter
  • onChange: Whenever the value of the slider is changed, the called function is invoked. The value can change due to the slider movement or by passing the setValue function.

Types of slider

script.aculo.us provides us the flexibility and comfort of two different orientations for the slider:

  • Vertical slider
  • Horizontal slider

Vertical slider

When the axis orientation of a slider is defined as vertical, the slider becomes and acts as a vertical slider.

Horizontal slider

When the axis orientation of a slider is defined as horizontal, the slider becomes and acts as a horizontal slider.

So let's get our hands dirty with code and start defining the constructors for horizontal and vertical slider with options. Trust me this will be fun.

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Code usage for the slider

As a developer, I am sure you must have got a little bored reading only explanation. But hey hang on, we are getting into code!

Let's start with our HTML code and then the basic constructor definition of the slider.

The HTML code snippet is shown as follows:

<div id="track"><div id="handle1"></div>div>

Here, we have defined our track and handle as <div> elements.

The handle element should be placed inside the track element.

Good. So let's define the constructor for the slider here:

new Control.Slider('handle1', 'track1');

That's it! No, wait. We are missing something. Although the code is perfect, when we fire it up in the browser we can't see anything. That's because we need to style it.

The complete code with CSS is shown as follows:

<script type="text/javascript">
   window.onload = function() {
      new Control.Slider('handle1' , 'track1'
      );
}
</script>
<style type="text/css">
h4{ font: 13px verdana }
#track1 {
   background-color:#BCE6D6;
   height: 1em;
   width: 150px;
}
#handle1 {
   background-color:#30679B;
   height: 1em;
   width: 6px;
}
</style>
<body>
<h4>Basic Slider Example</h4>
<div id="track1">
   <div id="handle1"></div>
</div>

And the resulting output is shown in the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

That's the most basic slider we created. And I am sure you are not content with that. We need to explore more.

Code usage for the vertical slider

Moving on, we will now create a vertical slider and add some options to enhance our slider feature.

Most of the code remains from the above example. We will focus on the required changes to be made in the above code.

As mentioned in the explanation above, we need to define the axis orientation as vertical in our options to make a slider vertical.

axis: 'vertical'

So, the new constructor looks like the snippet shown as follows:

window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical'
}
);
}

And yes, since we are trying to make our slider vertical we need to change the CSS properties of height. The new CSS code will look like the following snippet:

#track1 {
background-color:#BCE6D6;
height: 10em;
width: 15px;
}
#handle1 {
background-color:#30679B;
height: 1em;
width: 15px;
}

So, the final script for the vertical slider is shown as follows:

<script type="text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',
{
axis:'vertical'
}
);
}
</script>
<style type="text/css">
h4{ font: 13px verdana }
#track1 {
background-color:#BCE6D6;
height: 10em;
width: 15px;
}
#handle1 {
background-color:#30679B;
height: 1em;
width: 15px;
}
</style>
</head>
<body>
<h4>Basic Vertical Slider Example</h4>
<div id="track1">
<div id="handle1"></div>
</div>

And, the beautiful vertical slider is here! Check out the following screenshot:

PHP and script.aculo.us Web 2.0 Application Interfaces

Code usage for the horizontal slider

We have seen how to create a vertical slider. We want you to have a wild guess of how to make a horizontal slider. Let me give you two hints:

  • We don't have to struggle to make a slider horizontal. It's the default axis option.
  • We can make a horizontal slider by passing the horizontal option to axis.

Which one would you prefer?

I am not going to give you code for this one though. But yes, I will give you approaches for doing the same.

We have already created one horizontal slider in the Code usage for the horizontal slider section. That was one approach. Now try changing the axis option to horizontal in the above code for the vertical slider.

You may also need to change some CSS properties for height and width, and I am sure you would love doing them. It's so much fun! After you make changes to the height and width parameters of the CSS properties, the screenshot of slider should look like the following:

PHP and script.aculo.us Web 2.0 Application Interfaces

Summary

In this article we have learned and explored the following topics:

  • Introduction to the slider using script.aculo.us
  • Explanation of the slider
  • Different types of the slider

In the second part of the article series, we shall see the code usage for the slider with options, some tips and tricks, and a hands-on example for the horizontal and vertical slider.

 

If you have read this article you may be interested to view :

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Sridhar Rao

Sridhar Rao has been learning, working and developing web applications from the time he was introduced to web. The very idea of reaching out to masses and bringing change in the behavior of the users through web applications excites him the most. Most of his work has been in PHP, MySQL and Javascript. He has worked with some of the leading technology and services companies in his IT career.

Sridhar currently works for the world’s leading database and enterprise company. He holds an engineering degree in Information Technology and is based out of Bangalore, India.

Books From Packt

 

Learning jQuery 1.3
Learning jQuery 1.3

Magento: Beginner's Guide
Magento: Beginner's Guide

Drupal 6 JavaScript and jQuery
Drupal 6 JavaScript and jQuery

Drupal 6 Site Builder Solutions
Drupal 6 Site Builder Solutions

Spring Web Flow 2 Web Development
Spring Web Flow 2 Web Development

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

Mastering phpMyAdmin 3.1 for Effective MySQL Management
Mastering phpMyAdmin 3.1 for Effective MySQL Management

 

No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
d
w
Z
S
p
9
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software