Comments on: Vertical scrollbar using jQuery UI slider

By: kly411

kly411 — Mon, 30 Jan 2012 20:22:58 +0000

Thanks to Simon, Mitch, Brent and all subsequent contributors. This is a major find in my book and pleasantly understandable!

By: Simon

Simon — Fri, 23 Dec 2011 08:01:59 +0000

Laura

It’s easiest if you just view the source code on the demo page – Ctrl+U in everything except Internet Explorer where it’s Page > View Source.

By: Laura

Laura — Thu, 22 Dec 2011 23:26:45 +0000

can you please include the html in your example

By: Simon

Simon — Tue, 08 Nov 2011 08:45:27 +0000

Varun

The starting point for this code was the horizontal scrollbar example on the jQuery UI site – you might want to take a look at that.

By: Varun

Varun — Tue, 08 Nov 2011 06:48:15 +0000

Just wondering what parameters need to be changed to make your code scroll horizontal.

By: Björn

Björn — Mon, 31 Oct 2011 19:37:57 +0000

Thanks a million. Browsed through the web for easily implementable scrollbars, and tried several without success. Yours is working like a charm!

By: Simon

Simon — Fri, 28 Oct 2011 15:53:23 +0000

I’ve added a fix to this problem to the demo.

By: Dick Kirkland

Dick Kirkland — Thu, 27 Oct 2011 20:05:43 +0000

Mr. Battersby,
Thanks so much for this great resource. Related to the demo (w/buttons) at…
http://www.simonbattersby.com/demos/vertical_scrollbar_demo_14_scroll_buttons.htm
I see some weirdness occur when a user could possibly drag the button image(s) off of the click point. This seems to clog up the behavior of the scrollbar. Sometimes, the handle on the slider will vibrate like it’s confused. Again, this happens only when I drag the images off of the click destination/link area on the buttons. I’ve reproduced it in IE9 and FF 7.0.1. I really like this solution, but I’m hesitant to implement it because of the slight bug I’ve found. Do you have any ideas as to why this is happening? I’m wondering if I assign the click handlers to a container with a background image rather than just use the image themselves, if this will fix the issue. I really appreciate what you’ve done, just wondering if you’d noticed this or had any ideas. Thanks in advance for reviewing.

By: Mikhail

Mikhail — Wed, 19 Oct 2011 10:27:02 +0000

Thank you! very usefull!

By: Simon

Simon — Tue, 18 Oct 2011 07:23:02 +0000

Yes. For the basic slider, change this:

 $("#scroll-pane").after('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');

to this:

 $("#scroll-pane").before('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');

and then in the css move margin-left:50px from #scroll-pane to #slider-wrap.