Creating a Basic Horizontal Scrollable DIV region – Part Two

Continuing from my previous tutorial, about creating a horizontal scrollable region using HTML and CSS. We can see that creating a horizontally scrollable region isn’t too hard, but the end result is rather basic, and has some minor issues. In particular, the size of the scrollable area was hardcoded and as a programmer, hardcoding is usually grounds for a public flogging. Besides the hardcoding, visually, it doesn’t look great, because the scrollbar is not proportional to the true width of the scrollable region. Of course, if you know how many items will be in your scrollable region, then you can calculate the width before hand, and then hardcoding isn’t so bad. But if you are working on an application, you might not know until after the page is rendered. So, how do we attempt to fix this?

JQuery to the Rescue

Fortunately, for us, some very intelligent people exist, such as John Resig, who created a javascript library called “JQuery“, which provides a framework for doing incredible things on your web site with javascript. I won’t go into exhaustive detail about JQuery, but it has grown quite popular over the years, and is now a vital part for doing serious web development. As such, we will be using JQuery to help us fix the sizing issue with our scrollable region.

You can grab the library from http://jquery.com/. As of the writing of this tutorial, I used version 1.7.1, and I threw the library into a folder called “js”.

All we need to do is add the following lines into the <head> area of our web page:

[sourcecode language=”html”]
<script src="js/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function() {
var numImg = $("#scrollableDiv img").size();
var newWidth = (numImg * 110) + "px";
$("#scrollableDiv").css("width",newWidth);
});
</script>
[/sourcecode]

So, what’s all that do? The first line includes the jQuery library into your page, the second <script> block is where the magic happens.

Essentially, when the page is ready. I get a count of the number of images in my scrollableDiv region and store that in a variable numImg.

I know that the images are 100pixels wide, and my CSS pads the margins around each image by 5 pixels on each side. So, doing basic math, I can take the number of images and multiply it by 110. I then add the string “px” to it and newWidth now has my new width value I want to use on the style applied to the scrollableDiv.

Using JQuery, I can override the CSS style on my scrollableDiv and set the width to my newWidth variable. 

If you really want to get fancy, you can reduce these three lines into one by combining them into:

[sourcecode language=”javascript”]
$("#scrollableDiv").css("width",($("#scrollableDiv img").size() * 110) + "px");
[/sourcecode]

So, if you run your page now, the scrollbar will magically scale down to a more relevant size, and using the scrollbar won’t leave you in a vast sea of emptiness on the right side of the scrollable region. Click here to see a demo of the code.

The completed source code is as follows:

[sourcecode language=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Basic Horizontal Scrollable DIV</title>
<style>
/*
The html, body, and the min-height in the container allows
for the contents to fill the browser window.
*/
html {
height: 100%;
}
body {
margin:0px;
height: 100%;
}
#container {
background-color:#DDD;
min-height: 100%;
}
/*
The Wrapper is required to establish the location of our scrollable
region. Notice the overflow is auto to allow the browser to decide
if scrollbars are needed.
*/
#scrollableAreaWrapper {
overflow:auto;
width:100%;
height:110px;
background-color:blue;
}
#scrollableDiv {
width: 5000px;
margin:5px;
}
#scrollableDiv img {
margin: 5px;
float: left;
border: 0px;
}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script>
// Now this is better. The size of the DIV is nowrap
// Dynamically sized, so the scrollbars are only as long
// as needed.
$(document).ready(function() {
// an example of the one liner below as broken into steps.
// var numImg = $("#scrollableDiv img").size();
// var newWidth = (numImg * 110) + "px";
// $("#scrollableDiv").css("width",newWidth);
$("#scrollableDiv").css("width",($("#scrollableDiv img").size() * 110) + "px");
});
</script>
</head>
<body>
<div id="container">
<div id="scrollableAreaWrapper">
<div id="scrollableDiv">
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
<a href="#"><img src="images/thumbnail.jpg" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
[/sourcecode]

All that’s left now is to make that scrollbar look a little better. But that’ll be a topic for my next tutorial.

Thanks for reading.