How do I alter this horizontal sliding scroll to become vertical instead?

JayZeeBoy
JayZeeBoy used Ask the Experts™
on
Please see this script:
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div

The author creates a nice and simple demo for using the jquery slider for horizontal scrolling.  How would I make this vertical instead?
See
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
JayZeeBoy

Author

Commented:
OK, so it does not have to be that exact example.

All I need is a way to use the JQuery slide to vertically scroll.  Anyone know how to do this?  I want it to be JQuery so it will use my theme...
Senior Javascript Developer
Top Expert 2008
Commented:
Please read carefully page:

http://docs.jquery.com/UI/API/1.7.1/Slider

look at "vertical" section,

then everything you need to change in page you provide is:


$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide,
    orientation: "vertical"
  });
});
 
 
 
function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") -
                  $("#content-scroll").height();
  $("#content-scroll").animate({scrollTop: ui.value *
     (maxScroll / 100) }, 1000);
}
 
function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") -
                  $("#content-scroll").height();
  $("#content-scroll").attr({scrollTop: ui.value * (maxScroll / 100) });
}

Open in new window

JayZeeBoy

Author

Commented:
thank you!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial