On 26 Lis 2009, 17:32, "need to know more!" <mn...@matrixict.com>
wrote:
> 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) });
> }
Try change
function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollHeight") - $
("#content-scroll").height();
$("#content-scroll").animate({scrollTop: ui.value * (maxScroll /
100) }, 1000);
}
to
function handleSliderChange(e, ui)
{
var maxScroll = $("#content-scroll").attr("scrollHeight") - $
("#content-scroll").height();
$("#content-scroll").animate({scrollTop: maxScroll - ui.value *
(maxScroll /
100) }, 1000);
}
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery...@googlegroups.com.
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
