Using jQuery Slider to Scroll a Div

Today’s tutorial is going to show how to create a horizontally scrolling div using jQuery, html, and css. The main part of this tutorial is going to focus on the jQuery which is used to build the slider which controls the scrolling. One of the first questions that is going to pop into your head is, “why?”. Well the main reason to do this is to be able to build a custom scroll bar/slider. You can also introduce extra functionality using the jQuery slider.

To get this started go ahead and check out the little demo below. There isn’t anything real hard to figure out with the demo. One nicety to check out is the ability to click on the scroll bar anywhere and the div will do an animated scroll to that position. Just as a note, I have noticed a small bug with the jQuery slider where it doesn’t always get the end position correct when you click on the scroll bar. Well, take a second and bask in the glory of the scrolling area below.

<div id=”main”>
<div id=”content-slider”></div>
<div id=”content-scroll”>
<div id=”content-holder”>
<div class=”content-item”>
</div>
<div class=”content-item”>
</div>
<div class=”content-item”>
</div>
<div class=”content-item”>
</div>
<div class=”content-item”>
</div>
</div>
</div>
</div>

To complete the html part we need to add some css to make things look as they should. After the code I will go over it.

#main {
width: 510px;
margin: 0 auto;
}

#content-slider {
width: 490px;
height: 6px;
margin: 5px;
background: #BBBBBB;
position: relative;
}

.ui-slider-handle {
width: 8px;
height: 14px;
position: absolute;
top: -4px;
background: #478AFF;
border: solid 1px black;
}

#content-scroll {
width: 500px;
height: 300px;
margin-top: 10px;
overflow: hidden;
border: solid 1px black;
}

#content-holder {
width: 1500px;
height: 270px;
}

.content-item {
width: 290px;
height: 270px;
padding: 5px;
float: left;
}

Starting at the top we simply set the width the main wrapper. Then we set the size of the slider bar, we also have to set the position to relative (a must have). For the handle we set the size and more importantly the position to absolute. For the scrolling div we set the size to a visible area we want. To make sure the content is hidden beyond that we set overflow to hidden. The inside content holder needs to be wide enough to hold all of the content horizontally. Finally the content items themselves need to float left in order to keep moving horizontally.

We can start working with jQuery (1.3.2) now that we have everything setup. We also need to use some jQuery UI script so I built a custom script that included two pieces the UI Core and Slider Widget.

To get things moving let’s take a look at the code to setup the slider. Using the basic jQuery setup function $(document).ready() we build our slider. To do this we use the function slider called off of the selector for the slider element. The options we pass are an object with animate, change, and slide properties set. The change property is set to the function that will be called when the slider value changes and the slide property is set to the function that is called when the slider handle moves. The creation code is below, we will add the event handlers after.

$(document).ready(function(){
$(“#content-slider”).slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});
});

The two handle functions are below, I will go over the code after.

function handleSliderChange(e, ui)
{
var maxScroll = $(“#content-scroll”).attr(“scrollWidth”) -
$(“#content-scroll”).width();
$(“#content-scroll”).animate({scrollLeft: ui.value *
(maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
var maxScroll = $(“#content-scroll”).attr(“scrollWidth”) -
$(“#content-scroll”).width();
$(“#content-scroll”).attr({scrollLeft: ui.value * (maxScroll / 100) });
}

The first line of both event handlers calculates the maximum scroll value, which is equal to the scrollWidth minus the width of the div. Then for the change event we animate the div scrolling using the jQuery core animate function. Then for the slide event we simply set the scrollLeft value. To calculate we use the slider value (defaults to value of 0 to 100) and the max scroll to figure out the scroll offset.

Well that pretty much takes care of all the code. You can download all the demo slider application files and if you have any questions feel free to ask. Until next time, keep coding and keep reading SOTC. Also note that the demo was tested in FF2, FF3, Opera 9.6, Safari 3.1.2, IE 6, and IE 7.

Code has been updated to work with jquery 1.3.2 and jquery UI 1.7. The example project has been updated as well. The example above is still using older code.

For jQuery UI 1.7.2 in order to get smooth scrolling when clicking on the scroll bar you need to update ui.slider.js and replace the following:

var allowed = this._trigger(“slide”, event, {
handle: this.handles[index],
value: newVal
});
if(event.type   == ‘mousemove’) {
var allowed = this._trigger(“slide”, event, {
handle: this.handles[index],
value: newVal
});
}
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s