Response title
This is preview!
Move this topic
slider-scrollbar demo
in Developing jQuery UI
•
14 years ago
I posted up a demo today using slider to make a scroll pane.
http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side_scroll.html
I'm not sure if it strays too far from a typical slider use case to be
in the slider demos... any thoughts?
Replies(9)
Leave a comment on scottjehl's reply
Re: slider-scrollbar demo
14 years ago
This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
Leave a comment on pbakaus's reply
Re: slider-scrollbar demo
14 years ago
> I'm not sure if it strays too far from a typical slider use case to be
> in the slider demos... any thoughts?
Well... it is maybe stupid, but when you click on the handle, the
handle is centered within the mouse pointer. In a normal slider this
does not happen.
Leave a comment on ditiem's reply
Leave a comment on pbakaus's reply
Re: slider-scrollbar demo
14 years ago
<html><body bgcolor="#FFFFFF"><div>It's not really a bug in slider. In tweaking the handle width to show scroll proportion, I had to continually change the width of the slider widget itself (which is centered and invisible) so the handle could always offset-center over its value on the scale.</div><div>I guess it would need the click to jump behavior disabled in this case because the component doesnt fill the width you'd think it does but I wasn't sure how to kill it.</div><div>
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
Leave a comment on scottjehl's reply
Re: slider-scrollbar demo
14 years ago
<html><body bgcolor="#FFFFFF"><div>Given the last scenario I described, maybe it is a bug in slider after all . Not sure...
</div><div>
On Jan 12, 2009, at 7:56 AM, Scott Jehl <<a href="mailto:scott@scottjehl.com">scott@scottjehl.com</a>> wrote:
</div><div></div><blockquote type="cite"><div><div>It's not really a bug in slider. In tweaking the handle width to show scroll proportion, I had to continually change the width of the slider widget itself (which is centered and invisible) so the handle could always offset-center over its value on the scale.</div><div>I guess it would need the click to jump behavior disabled in this case because the component doesnt fill the width you'd think it does but I wasn't sure how to kill it.</div><div>
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com"><a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a></a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
</div><div>
On Jan 12, 2009, at 7:56 AM, Scott Jehl <<a href="mailto:scott@scottjehl.com">scott@scottjehl.com</a>> wrote:
</div><div></div><blockquote type="cite"><div><div>It's not really a bug in slider. In tweaking the handle width to show scroll proportion, I had to continually change the width of the slider widget itself (which is centered and invisible) so the handle could always offset-center over its value on the scale.</div><div>I guess it would need the click to jump behavior disabled in this case because the component doesnt fill the width you'd think it does but I wasn't sure how to kill it.</div><div>
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com"><a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a></a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
Leave a comment on scottjehl's reply
Re: slider-scrollbar demo
14 years ago
<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div>I fixed all the issues mentioned earlier.</div><div>It's pretty similar to a native slider implementation now - aside from the fact that it moves the handle if you click it.</div><div>It reflows with various window resizing situations too (slider locked all the way right reveals more content, etc).</div><div>
</div><div><a href="http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side_scroll.html">http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side_scroll.html</a></div><div>
</div><div>Good enough until we have a better way to do this I suppose. :)</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>
</div></div></div></span> </div>
<div><div>On Jan 12, 2009, at 8:02 AM | Jan 12, 2009, Scott Jehl wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div bgcolor="#FFFFFF"><div>Given the last scenario I described, maybe it is a bug in slider after all . Not sure...
</div><div>
On Jan 12, 2009, at 7:56 AM, Scott Jehl <<a href="mailto:scott@scottjehl.com">scott@scottjehl.com</a>> wrote:
</div><div></div><blockquote type="cite"><div><div>It's not really a bug in slider. In tweaking the handle width to show scroll proportion, I had to continually change the width of the slider widget itself (which is centered and invisible) so the handle could always offset-center over its value on the scale.</div><div>I guess it would need the click to jump behavior disabled in this case because the component doesnt fill the width you'd think it does but I wasn't sure how to kill it.</div><div>
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com"></a><a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
</div><div><a href="http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side_scroll.html">http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side_scroll.html</a></div><div>
</div><div>Good enough until we have a better way to do this I suppose. :)</div>
<div apple-content-edited="true"> <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><div><div>
</div></div></div></span> </div>
<div><div>On Jan 12, 2009, at 8:02 AM | Jan 12, 2009, Scott Jehl wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite"><div bgcolor="#FFFFFF"><div>Given the last scenario I described, maybe it is a bug in slider after all . Not sure...
</div><div>
On Jan 12, 2009, at 7:56 AM, Scott Jehl <<a href="mailto:scott@scottjehl.com">scott@scottjehl.com</a>> wrote:
</div><div></div><blockquote type="cite"><div><div>It's not really a bug in slider. In tweaking the handle width to show scroll proportion, I had to continually change the width of the slider widget itself (which is centered and invisible) so the handle could always offset-center over its value on the scale.</div><div>I guess it would need the click to jump behavior disabled in this case because the component doesnt fill the width you'd think it does but I wasn't sure how to kill it.</div><div>
</div><div>I<span class="Apple-style-span" style="-webkit-composition-fill-color: rgba(175, 192, 227, 0.231373); -webkit-composition-frame-color: rgba(77, 128, 180, 0.231373); "> even tried wrapping the handle in a helper div and centered and manipulated its width instead of the widget itself, which still worked great but didn't change how click jump worked... </span></div><div>
</div><div>
On Jan 12, 2009, at 3:19 AM, "Paul Bakaus" <<a href="mailto:paul.bakaus@googlemail.com"></a><a href="mailto:paul.bakaus@googlemail.com">paul.bakaus@googlemail.com</a>> wrote:
</div><div></div><blockquote type="cite"><div>This is a great example, love it! However, it seems there's a bug in slider - I can't click on outside the handle and let the handle move to that position. Any clue?
Leave a comment on scottjehl's reply
Re: slider-scrollbar demo
14 years ago
While dragging, mouse and handle don't move at the same speed - thats
a bit weird. A native scollbar moves exactly at the speed I'm dragging
it...
Jörn
a bit weird. A native scollbar moves exactly at the speed I'm dragging
it...
Jörn
Leave a comment on joern.zaefferer's reply
Re: slider-scrollbar demo
14 years ago
That's definitely one thing that doesn't line up.
I can make the mouse stick fine if we sacrifice the click-jump on the
bar working properly...
Richard says draggable slider ranges will be the answer once they are
implemented.
It works for a demo of something you can do with a slider though... I
think.
Leave a comment on scottjehl's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to scottjehl's discussion