Using jQuery Slider to Scroll a Div

Skill

Using jQuery Slider to Scroll a Div

Posted in:

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.

Lorem ipsum dolor sit amet, ut turpis sagittis, nec placerat, molestie convallis. Mattis et delectus, nullam cras et, faucibus ultrices. Nunc elit, tellus vulputate eros. Leo wisi, luctus pretium. Platea arcu, in natoque non, ipsum eu vivamus.

Justo dictumst, aliquam metus. Libero sed vivamus, cursus felis etiam. Eu nonummy vestibulum, class excepturi. Nulla tincidunt urna. Phasellus ac lacus, sit eu massa. Velit pretium purus. Rem ac porta.

Ok, now let's get coding. We are first going to start with the basic html setup of the demo above. This shouldn't look like anything crazy. The first element I pretty much always add to wrap my content is a div. We then setup the slider div, the handle will be created for us. Next up is a div to scroll and inside a div wide enough to hold the content. And lastly the content, which in my case is a bunch of divs. This ends up looking like the following (minus the content).

<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.

Edited May 11 2009

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.

Edited June 18 2009

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

});

with

if(event.type   == 'mousemove') {

    var allowed = this._trigger("slide", event, {

        handle: this.handles[index],

        value: newVal

    });

}

Thanks, to hiKrittiya for providing this update.

77 comments

Gordon McNeil
10/24/2008 - 21:46

Your link to the "demo sler aspplication files" does not work.

How do I get a copy of your slider code?

Thanks.

The Tallest
10/24/2008 - 21:58

Sorry, there was a typo in the link - it is fixed now.

Tomas
11/07/2008 - 09:16

Thanks a lot for the cool code. This is one of few jQuery scrollers I have found that actually works smoothly in all browsers. Well done!

Now I am trying to change the scroll-handle to be an icon instead. Wish me good luck.

Tomas

Jared
11/08/2008 - 02:29

What if you only have 3 content-items and have all this extra white space?

Is there something that can be tweaked with the coding to scroll to the length of the last div?

Veera
11/11/2008 - 23:26

Very useful JQuery script.

Andy
11/15/2008 - 09:23

Great app. How do I make it scroll down instead of to the left? I feel like I've changed all the css to do this. But I'm not certain where to start with the jQuery scripts.

Thx

Phil
11/16/2008 - 09:52

That is really nice. I too would like to see how to make is scroll vertically. Nice work.

Mark
11/17/2008 - 18:35

is there a way to use this script but to not have to set the width of the container div (content-holder). I would like to use the scroller for a site running off of a cms - so I can't preset the width because the amount of content will be changeable.

Henry
11/24/2008 - 23:39

The code works, thanks for your blog.

Chris
11/25/2008 - 12:05

Hi, great script! thank you! I w as wondering if you could tell me how to get the slider bar centered under the box? I've shortened it but it aligns on the left. Would love to have it centered.

Thanks, -Chris

Chris
11/25/2008 - 12:06

link to my page is here:
http://tattoodesignmall.com/index.php?main_page=index&cPath=2

Amy
12/09/2008 - 12:48

Thanks for the tutorial!

When you refresh the page, the div content doesn’t start back at the starting point to the left like the handle does. Is there a way to make this happen?

Also, is there a way to make the slider snap to step points while retaining the smooth scrolling effect?

@mark: assuming all the content-item divs are equal width, you can make it work without knowing the exact width of the content holder. What I did was calculate the amount of child divs in the content holder. Then, since I knew the width of each content-item div i set $(”#content-holder”).css(”width”, childWidth * amountOfChildren

My example is at http://static.spartaninternet.com/sandbox/

Larry
01/26/2010 - 17:11

The issue with the slider not being reset to its correct position along with the div can be corrected using the following bit of code

$(document).ready(function(){

        $("#content-slider").slider({ animate: true, change: handleSliderChange, slide: handleSliderSlide });

        var content_scroll_pos = Math.floor(($("#content-scroll").scrollLeft() / $("#content-scroll").width()) * 100);

        if ($("#content-scroll").scrollLeft() != 0) { $("#content-slider a").css("left",content_scroll_pos+"%"); }

});

Great script, thanks again.

Diego
12/17/2008 - 07:11

And is there any way to make it works if you don’t have javascript active?, i mean unobtrusive javascript.

Thanks in advance.

Diega
12/29/2008 - 08:09

Sorry for the stupid question but how can I use this scroll for vertical content?

Txo
01/03/2009 - 10:24

I have 50 “content-item” and scroll is very fast.
How to reduce scroll speed

saagar
01/22/2009 - 08:50

Great! helpful for us!!!!!!!!!!!!!!!

MacAttack
04/10/2009 - 13:08

Hi! Great script...

I was just wondering how I might be able to make the scrolling action a bit smoother. Are there any options or plugins that might help make the scrollbar a bit more responsive and smooth?

Thanks!

The Fattest
04/13/2009 - 10:13

Are you talking about the content scrolling more smoothly or the scrollbar itself? For the more responsive part can you include an example that illustrates what you're looking for?

Salman
05/06/2009 - 10:03

Hi Fattest

great tutorial
but does not work with latest build of jquery.

can you please amend it for new jquery i have tried many times but failed i hope you can get it to work with JQ1.3 above.

Regards
Salman

The Fattest
05/06/2009 - 12:15

Yes, I will do this today at some point and update the post above.

Salman
05/07/2009 - 14:49

Hi Fattest

Thanks mate for quick response,
looking forward to it, i want to implement this idea into one of my apps so keenly waiting for the update.

also when i try to post a reply from google chrome i get an error saying

"Your hashcash string is not valid. Are you a spammer?"

Regards
Salman

The Reddest
05/07/2009 - 14:54

Thanks for the comment reply bug. I just tried using Chrome to reply and had no issues (both logged in and not logged in). The comment system requires javascript to be enabled when you're not logged in. Is there a chance you've got javascript disabled?

Salman Sadiq
05/07/2009 - 15:05

Wow

you guys are fast with responses
i think javascript is enabled, can you disable javascript in chrome?

lets try to send this comment from chrome instead of fox

and what about the tutorial being compatible with JQ1.3

salman

The Reddest
05/07/2009 - 15:08

You know, I actually don't think you can disable JS in Chrome. It looks like the comment worked though, so maybe that was a one-time glitch. I'll have to check out our HashCash module. As far as the tutorial working on JQ1.3, that's all up to The Fattest. I'm sure he's on it though.

M Salman
05/09/2009 - 13:18

Well guys its my 4th and final attempt to send comment and i have tried chrome, IE7, Firefox3 all said
"you hascash is not valid are you a spamer".

fattest iam still waiting foe the tutorial to be updated for jq1.3

salman

arachnid
05/10/2009 - 09:41

It is not working properly with jquery v1.3.2 and 1.7.1. The content is moving but the handle remain fixed

The Fattest
05/11/2009 - 09:33

Sorry for the delay but the code has been updated to jquery 1.3.2 and ui 1.7.1. Let me know if you have any issues.

Peachy
05/26/2009 - 11:24

Hi, I've tried the latest version of this (downloaded your demo files) and there do seem to be some bugs using jquery1.3.2 and ui 1.7.1. I've been testing in FireFox 3 and Safari on the Mac.

Are you aware of any bugs?

Anonymous
05/16/2009 - 15:49

Hi there,

I am using this script, making a portfolio,
here is a snippet, explaining the problem:

bkinfo.bk.tudelft.nl/portfolio/websites/jvanommeren/Third%20website/slider_test.html#

the problem is that the slider only appears at the first loaded item.

I am pretty new to jquery, probably, I need to make some sort of generic piece of code, but I dont know how...

Thanx!

The Fattest
05/18/2009 - 21:11

I think this is probably because of the multiple sliders and your using the same id for every slider. This is going to confuse javascript. If you would like I can put up a sample using multiple sliders?

Anonymous
10/23/2009 - 12:06

How do I edit the javascript code if I'm using multiple sliders? Any help would be very much appreciated, thank you in advance.

Sheldon
05/20/2009 - 22:23

First, nice piece of code!

I have an interesting issue...I'm using this to scroll my news and everything works well in FF, Chrome and Safari, in IE however the floated item elements remain stationary when I scroll the div.

Any ideas why or how to fix?

My sandbox page: http://newsite.aquanode.com/news

Thanks in advance and again nice work.

leluch
05/21/2009 - 01:28

Hi,

Nice work. How can i make it to scroll vertically instead of scrolling horizontal?

Thanks

leluch

hiKrittiya
06/12/2009 - 01:02

Very nice work! I downloaded your slider_example which uses jquery 1.3.2 and ui 1.7.1. and tested it.
It works fine when I drag the blue handle. However,if I click anywhere on a grey track, the content doesn't scroll /animate properly. Sometimes the content jumps without animation and sometime with animation.

I found a similar issue when I tried the tutorial I found below with jquery 1.3.2 and ui 1.7.1 http://jqueryfordesigners.com/slider-gallery/

I'll revisit your site to see if you find any solution to fix it.
Thanks again :) !!!!

The Fattest
06/12/2009 - 12:43

I will check it out, probably won't get to this until tonight though.

hiKrittiya
06/16/2009 - 10:51

hi The Fattest.
Thank you for your response. Did you get a chance to look and find a solution to the unsteady animation (when clicking the track)? I wonder if this is caused by a conflicting logic in the two callback functions ( slide and change) .
For example, whenever the track is clicked, the handleSliderSlider function will always be executed before handleSliderChange function. The code in the handleSliderSlider function tells the content-scroll to move without animation. Then, the handleSliderChange tells content -scroll to move with animation BUT the content -scroll was already moved before.

Is there a way to stop handleSliderSlider from being executed when the track is clicked?

If my assumption makes sense, I wonder why this is not an issue in older jquery ui 1.2.x ( the demo embedded on this page shows a perfect smooth animation when clicking the track).

I'm new to jQuery but found your resource very useful. Thank you in advance!

The Fattest
06/16/2009 - 15:03

Yeah I played around with a little bit, I will try and come up with solution quickly.

hiKrittiya
06/17/2009 - 16:43

hi again :)
I found the answer that someone posted from
http://jqueryfordesigners.com/slider-gallery/
and want to share.

//Using jQuery ui 1.7.2
the ui.slider.js: needs to be modified. from

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

    });

}

This prevents the slide function from being triggered when clicking the slider ( track).

The Fattest
06/17/2009 - 17:40

awesome stuff, I assumed it was something of mine and hadn't started combing through their code yet. I will add an edit to the post about it.

Anonymous
07/02/2009 - 23:44

ui.slider.js ? For all those who don't understand which file he's talking about, just use
http://jqueryui.com/latest/ui/ui.core.js and
http://jqueryui.com/latest/ui/ui.slider.js
instead of the custom jquery ui, and scroll to line 360 of
ui.slider.js to find the "allowed" variable".

Andrea
07/15/2009 - 08:14

Hi to all and thanks for the cool code!!!
I have this problem: http://89.186.66.71/dmanagement_ok/html/scroll/multimediaw.asp?mnome=megan

Anyone help me?

thanks

Bye

The Fattest
07/15/2009 - 12:52

What is the issue, from a quick glance I didn't see anything obvious.

invisionblue
07/27/2009 - 22:23

http://www.invisionblue.com/lab/scrollhorizontal/slider_test.html how come when I click the orange scroller it moves about 30-40 pixels to the right?

The Fattest
07/28/2009 - 09:10

This is happening because the click is being recorded on the scroller (track) and the middle of the slider button is the 0 point on it, the left side of the button is. Not sure the best way to remedy that, will try and think up something though.

invisionblue
07/28/2009 - 10:15

If I made the button smaller would that help? I've noticed on yours and some others it's thin and doesn't do that.

The Fattest
07/28/2009 - 12:37

Yeah that would certainly help.

invisionblue
07/28/2009 - 13:33

problem solved without changing the size. I simply removed the attribute "width: 66px;" and made it "padding: 5px 33px 5px 33px;" and it now works smoothly. So I suppose the width attribute was the problem here.

Ian
08/04/2009 - 13:25

great work! I'm having a problem with using a background image on the handle. If I use a root-relative url, or a full url, it creates all kinds of problems in IE. Something like this doesn't work:

.ui-slider-handle{

background:url(http:www.foo.com/scrollbar/handle.gif);

}

but this works:

.ui-slider-handle{

background:url(scrollbar/handle.gif);

}

I need to use root-relative links in my site, but can't figure out why this is causing problems.

The Reddest
08/04/2009 - 15:14

At first glance, the URL syntax is incorrect. You have:

http:www...

Where it should be

http://www...

You forgot the set of slashes after the http.

Ian
08/04/2009 - 15:31

Sorry, that was just a typo in my comment. The problem persists with a properly formed url. The problem involves quirky behavior during hover and drag states in IE. I tried making explicit styles for different link states (.ui-slider-handle:hover, ect), as well as the specific class names that are added when the handle changes states (ui-state-hover, ui-state-focus).

The Fattest
08/04/2009 - 17:13

Which version of IE are you using?

Ian
08/05/2009 - 12:39

IE6

The Reddest
08/04/2009 - 17:15

I always put the contents of url() in quotes. ex url("scrollbar/handle.gif"). Does that help at all?

Ian
08/05/2009 - 12:40

the behavior is the same for single quotes, double quotes, and no quotes

Ian
08/05/2009 - 15:57

If you want a wide scrollbar you'll run into a couple issues, but I've found solutions.

If the scrollbar is wide it will align to the right of the mouse when you click the track, rather than ending on the center. This can be fixed by adding a right-margin to the handle that is the negative value of half the handle width. Example:

.ui-slider-handle {

width: 92px;

height: 12px;

position: absolute;

margin-left:-46px;

overflow:hidden;

}

The handle also hangs off either end of the track rather than ending at the end of the track like you would expect from a normal scrollbar. Fix this by subtracting the handle length from the track width and adding a margin to the left and right of the track equal to half the length of the handle.

To make the shortened track appear longer you'll need to add elements to either side matching the track background, or use a single element on a lower z-index below the track.

The make the left and right sides of the track go to the end, you can add buttons on a higher z-index above the slider. Here's an example: 

css:

[css]

#sliderLeftButton{

           position:relative;

           top:-36px;

           height:12px;

           width:56px;

           overflow:hidden;

}

#sliderRightButton{

           position:relative;

           top:-48px;

           left:912px;

           height:12px;

           width:56px;

           overflow:hidden;

}

html:

<div id="sliderLeftButton">

                <div style="height:12px; width:56px; display:block"  onClick="javascript:moveSlider(0);"></div>

      </div>

      <div id="sliderRightButton">

                <div style="height:12px; width:56px; display:block" onClick="javascript:moveSlider(100);"></div>

</div>

javascript:

function moveSlider(value){

        $('#content-slider').slider( 'value' , value );

}

This code isn't optimized, you can probably clean up the css some. I hope this was helpful.

jd17ortiz
08/05/2009 - 17:48

Good evening friends

First, i want to congratulate you for the great job you're doing.

I've been having some troubles trying to put together the solution by increase the 8px size of ui-slider-handle to 40px. It actually increase but after move the slider to the end of the area it just fade away. Is there any solution for this problem? Thank you a lot for all your time, please let me know if you need extra information. I will appreciate so much your help, i don't know what else to do, i'm kind of desperate. Thank you friends. Best Wishes

The Fattest
08/05/2009 - 19:26

One of the earlier comments had an issue similar, he solved this by keeping the standard width and adding padding the slider to make it bigger.

jd17ortiz
08/06/2009 - 08:51

Hello My friend,

The fattest, I actually did read the post from invisionblue but in my case it didn't work that solution 'cause setting the padding the size of the ui-slider-handle did increase but it keeps getting out of the boundaries at the end of the area. Thank you a lot my pal,. I really appreciate all the time you're putting on this! Best wishes

The next link: http://jd17ortiz.100free.com/slider_test.html has an example of what im trying to do, in the code i change the padding as the last comentary says but the slider keeps getting out of position

The Fattest
08/12/2009 - 17:42

JD, sorry for late response but I was out for town for some RL vacation. I figured out why it goes out of bounds, they use the css left attribute to move it and they used to use absolute px placement calculating the correct amount for the width of the slider bar. They no longer do that and use percentages % now. This causes the slider handle to go off the end. They center the handle by using negative margin on the handle. I personally don't like this solution at all, but that is the way it is. I would suggest if you want to scroll the entire distance inside the bar you wrap the scroll bar in another div, in which you style like your scroll bar and then inside offset the actual scroll bar by the width of your handle. Let me know if this doesn't work out or if you need an example of what I am talking about.

jd17ortiz
08/17/2009 - 15:16

Thank you the fattest, you don't have to apologize, i understand perfectly. About the slider topic, i understand what you're suggesting, but it isn't clear enough for me the use of an internal div, if you could show me an example about it i would appreciate a lot. The solution a have come througth is the one you suggest about center the handle but this makes the sensible area of the scroll shrinks, but i don't think is quality at all.
My friend, if it isn't too much bother i would like to know if in order to implement two sliders i have to use the function $("#content-slider").slider({ twice, changing the id of each div for the slider. It isn't any other more elegant solution?
Thank you for everything and sorry for all the trouble. Greetings

JD.

pradeep
11/11/2009 - 07:28

hi, can you pls give us an example to stop the slider going out of bound at the end. I have been struggling to solve this issue.

Rajesh
09/04/2009 - 03:23

hi dud,
it really nice, but I cant able to use #content-scroll's width by %, because whole pages i m making with % only, if I give width by (px)It does not flow of design page. Please help.

Rajesh
09/04/2009 - 05:25

Hey it working........ thk alot

jenningsk
09/15/2009 - 15:23

Awesome, this really helped me out with something Ive been working on but I was hoping for help getting things to scroll vertically.

I changed orientation to vertical, and made the appropriate CSS changes butt the scroll bar wont work.

do I have to make changes to handleSliderChange and handleSliderSlide?

I changed the lines for max scroll values to:

var maxScroll = $(".content-scroll").attr("scrollHeight") - $(".content-scroll").height();

but do I have to change that "scrollLeft" on the next line too?

brainac
09/23/2009 - 10:29

I've got few questions about that awsome slider.

1. Is it hard to make it slowly move itself? I'm new with jQuery and even if it's piece of cake I won't figure it out myself.

2. Is it possible to catch mouse wheel moves over it, and scroll it accordingly?

Thank you for any help

Anonymous
09/23/2009 - 16:50

i'm sorry if this is double post or i missed it in description, but for me, it looks better if the speed of sliding content is calculated in same way and using same easing as slider animation when clicking on slider tray. Speed of animation is calculated by the distance of mouseclick from the handle.
However its very nice example.

sry for poor english.

Jabie
10/08/2009 - 19:14

I am trying to do vertical scrolling too and I got the scroll to work except that the slider doesn't move/slide.

I changed the follow:

$(document).ready(function(){

  $("#content-slider").slider({

    animate: true,

        orientation: 'vertical',

    change: handleSliderChange,

    slide: handleSliderSlide

  });

});

function handleSliderChange(e, ui)

{

  var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();

  $("#content-scroll").animate({scrollTop: ((100 - ui.value) * (maxScroll / 100))  }, 1000);

}

function handleSliderSlide(e, ui)

{

  var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();

  $("#content-scroll").attr({scrollTop: ((100 - ui.value) * (maxScroll / 100)) });

}

Any idea how to make the slider handle to move? Thx a lot.

POPOEVER
11/14/2009 - 04:22

@Jabie you need a initiate value below orientation option I think, say:

orientation: 'vertical',
value: 100,

Kevin "Tentonaxe"
01/07/2010 - 11:48

This does cause the thumb to appear at the top of the scrollbar, however, the scrolling is inverted(the top of the scrollbar shows the bottom of the content)

To fix this, change the functions so they look like this:

$("#artist_bio_slider").slider({

  animate: true,

  change: handleBioSliderChange,

  slide: handleBioSliderSlide,

  orientation: 'vertical',

  value: 100

});

function handleBioSliderChange(e, ui)

{  

  var maxScroll = $("#artist_bio_content").attr("scrollHeight") - $("#artist_bio_content").height();

  $("#artist_bio_content").animate({scrollTop: (100-ui.value) * (maxScroll / 100) }, 1000);

}

function handleBioSliderSlide(e, ui)

{

  var maxScroll = $("#artist_bio_content").attr("scrollHeight") - $("#artist_bio_content").height();

  $("#artist_bio_content").attr({scrollTop: (100-ui.value) * (maxScroll / 100) });

}

the only difference is
ui.value
became
(100-ui.value)

Robin
01/22/2010 - 21:51

Kevin, I've found this tutorial and tried to adapt it to a vertical slider bar. I saw your comment and followed it, but my slider still doesn't slide. The content scrolls, but the slider doesn't move. Here's my code, do you see what could be the problem?

 
$("#content-slider").slider({

    animate: true,

    change: handleSliderChange,

    slide: handleSliderSlide,

    orientation: 'vertical',

    value: 100

  });

});

function handleSliderChange(e, ui)

{

  var maxScroll =

  $("#content-scroll").attr("scrollHeight") -

  $("#content-scroll").height();

  $("#content-scroll").animate({scrollTop:

  (100-ui.value) * (maxScroll / 100) }, 1000);

}

function handleSliderSlide(e, ui)

{

  var maxScroll =

  $("#content-scroll").attr("scrollHeight") -

  $("#content-scroll").height();

  $("#content-scroll").attr({scrollTop:

  (100-ui.value) * (maxScroll / 100) });

}

Rashmi
02/02/2010 - 03:49

I also used this code , but the slider does not moves. Any workaround ?

JSD
12/03/2009 - 09:53

Anyone else having issues with skinning the handle in ui 1.7.2

for what ever reason it seems to be defaulting back to the stock handle and not allowing me to use my own skin for it.. :/

1.7.1 works fine, I would go back to 1.7.1 but I already am using 1.7.2 through out the site and I would like to stay up to date..

Kevin "Tentonaxe"
01/07/2010 - 13:58

I didn't have any trouble skinning my thumb, make sure that your custom CSS comes after jquery ui's themebuilder so that your styles overwrite its styles.

dennis78
12/09/2009 - 10:51

Hi, when i use the script it works fine, but when i click the slider handle there appears a little blue halo around it... anyone knows how to get rid of this?

Thanks

bjorntheart
01/08/2010 - 05:29

Hi there

My mouse moves off my slider as I scroll. The issue resulting from this is that my content don't scroll all the way

I've also modified my #content-slider and .ui-slider-handle a bit according to my needs

#content-slider

{

    width: 100%;

    background: #BBBBBB;

    position: relative;

}

.ui-slider-handle

{

    width: 2px;

        height: 40px;

        position: absolute;

        top: -4px;

        background: #ff0000;

        background-image:none;

}

nettencicek
02/07/2010 - 16:24

good thakns