Question

I am trying to make the following example of a progress scrollbar vertical:

http://flowplayer.org/tools/demos/rangeinput/scrollbar.html

I have tried for ages now and cant seem to find a way. I’m new to jquery so any help would be much appreciated.

Answer 1

Updated version from comments:

http://jsfiddle.net/SKfGQ/5/

It works, but it’s massively fudged.

---

It’s as simple as inverting all the width and height related properties.

So, in the JavaScript, change left to top.

In the CSS, where there is a horizontal property and a vertical property, switch them.

I took the code from here: http://flowplayer.org/tools/demos/rangeinput/scrollbar.htm

And this was the result: http://jsfiddle.net/HGUzW/

The only new CSS is at the top:

#scrollwrap, .slider {
    float: left
}
.slider {
    margin-left: 50px
}