Question

I am trying to make some text scroll vertically using jQuery, I have been following the code example on http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div

Please can someone guide me on how to achieve

1. Position the slider vertically
2. Make the text scroll vertically when the slider is moved up or down

EDIT : (comment on @lonesomeday’s answer) I’ve already tried setting orientation:vertical and tried changing

1. scrollWidth to scrollHeight
2. width to height
3. scrollLeft to scrollTop

in the functions handleSliderChange and handleSliderSlide but that doesn’t work

Many thanks

Answer 1

Using the jQuery UI slider, you can do this easily with the orientation switch:

$('#slider').slider({orientation: 'vertical'});

In the example you’re using, you should invoke it as follows:

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

Note that you’ll probably have to make some styling changes to make it look as pretty as the original example.