Can anyone help. I have here a vertical slider being used to as a
scroll bar. At the moment it works to some degree.
The slider handle is in the correct place at the top (value: 100) and
the div content starts at the top, but when I move the handle down the
div jumps to the bottom and scrolls up, when the handle is moved up,
the content moves down. I have tried playing with the values in vars
but this just causes some weird usability issues.
Someone please tell me where I have gone wrong or create a tutorial
for us newbies to jQuery how to build a slider as a scroll bar.
Also anyone want to tell me how to add buttons with disabled states
for when the top and bottom are reached.
Code rather than hints as I am new and need to see an example to help
it sink into my fragile mind.
Here is the code:
--------------------------------------------------------------------------------------------------------------------------
$(document).ready(function(){
$("#content-slider").slider({
animate: true,
orientation: "vertical",
value: 100,
change: handleSliderChange,
slide: handleSliderSlide
});
});
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) });
}
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
