The advent of HTML5 is bringing with it a number of additional types that can be used with the<input> command, such as<input type="range">. Whilst this may be good news for developers, it is not so good for those who still have to work with older browsers, as this effect will only work natively in the most recent browsers.
Enter jQuery Tools' RangeInput, which makes the same effect available to all browsers (with the exception of IE5 and IE6, as the market share for these browsers is now so small that the lack of support for these two browsers will not affect the majority of your website audiences).
The jQuery Tools is designed to standardize the HTML5 functionality of<input type="range"> across all modern browsers, ready for when it is officially released, and the majority of browsers support it by default. As jQuery Tools abstracts a lot of the styling and inherent power away into its CSS, it will just be a matter of removing this, to allow the HTML5 functionality to work.
Let's dive into this a little more, to see how it would work in a normal environment.
All of the Tools follow the same basic principle of requiring minimal JavaScript to operate, with CSS styling providing the real power—RangeInput is no exception. The basic format falls into three parts—the first is the link to the CSS that provides the styling required by RangeInput, the second is at least one<input> statement (the following code shows two—the same principle applies for both), followed by the call to RangeInput from the Tools library:
<!-- styling for the range -->
<link rel="stylesheet" type="text/css" href="range.css"/>
<!-- a couple of HTML5 range inputs with standard attributes -->
<input type="range" name="range1" min="50" max="500" step="20" value="100" />
<input type="range" name="range2" min="0" max="1500" step="50" value="450" />
<!-- select all range inputs and make them ranges -->
<script>
$(":range").rangeinput();
</script>
Now, most of the people might think that a RangeInput should really be used to obtain a value from a preset scale, displayed on a website. This is a perfectly valid assumption, but only a small part of what RangeInput could be used to do. To prove this, let's have a look at the project to build a scrollable product gallery—this one will display a number of books, and could easily be used on a retail website, such as Packt's.
We're going to build a basic scrollable product gallery, in a style used by the PC manufacturer Apple™ some years ago. The inspiration for this project came from a tutorial available online, from http://jqueryfordesigners.com/slider-gallery/ , that explains how to create a similar effect using jQuery—which is a perfect excuse to show off how versatile jQuery Tools' RangeInput really is, and how it can be used to produce the same effect!
Although the basic framework will remain the same, this is something for which you could easily alter the styles at a later date, as you see fit. Let's begin with setting up the basic structure.
Open up the text editor of your choice, and insert the following lines Then save this as your HTML page:
<!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title> <!-- include the Tools --> <script src="http://ajax.googleapis.com/ ajax/libs/jquery/1.6.4/jquery.min.js"> </script> <script src="https://raw.github.com/jquerytools/jquerytools/ master/src/rangeinput/rangeinput.js"></script> </head> <body> <div id="wrap"> <!-- our scrollable element --> <div id="scrollwrap"> <div id="scroll"> <ul> </ul> </div> </div> <!-- rangeinput that controls the scroll --> <input type="range" max="2600" step="10" /> </div> <script> </script> </body> </html>
Now, we have our basic framework, let's start adding the content.
Note
You will note that in the demo, we have linked directly to the source file for Tools, that is hosted in Github. This is acceptable, but should only be for the purposes of development; if you are using this in a production environment, you will need to change to using one of the CDN links, or a downloaded copy of the library.
Next come the images of the books we need to add in; we're using 30 in all. If you want to use fewer, then this is possible, but you will need to alter the styling around the slider, to allow for the change in the number of images used.
Add the following in between the<ul> </ul> tags in your code:
<li><img src="books/4569.jpg" /><span class="textfont">Test Book 1 </span></li> <li><img src="books/6860.jpg" /><span>Test Book 2</span></li> <li><img src="books/4408.jpg" /><span>Test Book 3</span></li> <li><img src="books/6785.jpg" /><span>Test Book 4</span></li> <li><img src="books/2305.jpg" /><span>Test Book 5</span></li> <li><img src="books/1925.jpg" /><span>Test Book 6</span></li> <li><img src="books/1308.jpg" /><span>Test Book 7</span></li> <li><img src="books/5108.jpg" /><span>Test Book 8</span></li> <li><img src="books/6884.jpg" /><span>Test Book 9</span></li> <li><img src="books/4323.jpg" /><span>Test Book 10</span></li> <li><img src="books/4569.jpg" /><span>Test Book 11</span></li> <li><img src="books/6860.jpg" /><span>Test Book 12</span></li> <li><img src="books/4408.jpg" /><span>Test Book 13</span></li> <li><img src="books/6785.jpg" /><span>Test Book 14</span></li> <li><img src="books/2305.jpg" /><span>Test Book 15</span></li> <li><img src="books/1925.jpg" /><span>Test Book 16</span></li> <li><img src="books/1308.jpg" /><span>Test Book 17</span></li> <li><img src="books/5108.jpg" /><span>Test Book 18</span></li> <li><img src="books/6884.jpg" /><span>Test Book 19</span></li> <li><img src="books/4323.jpg" /><span>Test Book 20</span></li> <li><img src="books/4569.jpg" /><span>Test Book 21</span></li> <li><img src="books/6860.jpg" /><span>Test Book 22</span></li> <li><img src="books/4408.jpg" /><span>Test Book 23</span></li> <li><img src="books/6785.jpg" /><span>Test Book 24</span></li> <li><img src="books/2305.jpg" /><span>Test Book 25</span></li> <li><img src="books/1925.jpg" /><span>Test Book 26</span></li> <li><img src="books/1308.jpg" /><span>Test Book 27</span></li> <li><img src="books/5108.jpg" /><span>Test Book 28</span></li> <li><img src="books/6884.jpg" /><span>Test Book 29</span></li> <li><img src="books/4323.jpg" /><span>Test Book 30</span></li>
Let's move onto adding the JavaScript functionality:
// get handle to the scrollable DIV
var scroll = $("#scroll");
// initialize rangeinput
$(":range").rangeinput({
// slide the DIV along with the range using jQuery's css() method
onSlide: function(ev, step) {
scroll.css({left: -step + "px"});
},
// display progressbar
progress: true,
// the DIV is animated when the slider is clicked: function(e, i) {
scroll.animate({left: -i + "px"}, "fast");
},
// disable drag handle animation when slider is clicked
speed: 0
});
The code above creates an instance of the internal "scrolling" DIV (that is #scroll), then use CSS to move it to the appropriate amount either left or right; this is animated by using jQuery's .animate() function to provide smoother movement.
At this stage, if you run the code, you will not see an awful lot working—that is because the true power of jQuery Tools actually lies in the CSS styling that is applied.
<style>
// body, a:active and : focus only needed for demo; these can be // removed for production use
body { padding:50px 80px; }
a:active { outline:none; }
focus { -moz-outline-style:none; }
#wrap {
background:url("images/productbrowser.jpg") no-repeat scroll 0 0 transparent;
}
/* outermost element for the scroller (stays still) */
#scrollwrap {
position: relative;
overflow: hidden;
width: 620px;
height: 150px;
margin-bottom: 15px;
-moz-box-shadow: 0 0 20px #666;
-webkit-box-shadow: 0 0 20px #666;
border-radius: 4px 4px 0 0;
}
/* the element that moves forward/backward */
#scroll {
position:relative;
width:20000em;
overflow: hidden;
padding: 20px 100px;
height: 160px;
color: #fff;
text-shadow: 5px 1px 1px #000;
left: -100px;
}
#scroll span {
font-weight:bold;
font-family: sans-serif;
font-size: 12px;
float: left;
padding-right: 72px;
width: 30px;
}
slider {
background: transparent url("images/bkgrdhandle.png") no-repeat scroll 0 0 transparent;
position: relative;
cursor: pointer;
height: 17px;
width: 580px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px
margin-top: -10px;
padding: 3px;
margin-left: 16px;
background-size: 581px auto;
}
handle {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
cursor: move;
display: block;
height: 18px;
position: absolute;
top: 0; width: 181px;
background: url("images/scroller.png") no-repeat scroll
0 0 transparent;
}
handle:active {
background-color: #00f;
}
range {
display:none;
}
#scroll ul {
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
white-space: nowrap;
left: 40px;
}
#scroll ul li {
display: inline;
width: 80px;
}
#scroll ul li img {
padding-right: 20px;
}
</style>
If all is well, then you should see something similar to this, once you have added in the styling:
Whilst this was built for 30 book images, this could easily have been any product images—the key to it is ensuring that either the images used are of the same size, or that the CSS is adjusted to ensure an even width. The beauty of jQuery Tools is that whilst JavaScript is kept to a minimum, just about every element can be tweaked using CSS—RangeInput is no exception. It is important to note that though there are some CSS3 styles used in this demo, which you may find won't work in some of the older browsers; this is something to bear in mind when using this effect in your websites. After all, the very ethos of jQuery Tools is to push forward to using more and more CSS3