473,322 Members | 1,846 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Trouble attempting to create a custom vertical scrollbar / slider

I'm making a foray into trying to create custom vertical scrollbars and
sliders, and thought I had a basic idea how to do it, but seem to be
having some trouble with the implementation.

My thinking was:

(a) create a div for the slider / scroll nub to move within
(b) attach event handlers which, onmousedown, specify the slider/nub is
moveable, and onmouseup, specify it's not
(c) attach an event handler to the contaning div which, onmousemove,
checks to see if the slider/nub is moveable, and if it is, bring it to
the y-coordinate of the mouse within the containing div

Here's an implementation... that sortof works:

http://localhost/additional/ScrollBar/testscroll.html

You can see that if you mousedown on the nub and try to drag it, it
moves *just a little bit*... and then stops.

My code looks something like this (full listing available via view
source):

nubArea = document.getElementById('nubAreaDiv');
scrollNub = document.getElementById('scrollNubImg');
scrollNub.mobile = false;
scrollNub.onmousedown = function () { this.mobile = true; }
scrollNub.onmouseup = function () { this.mobile = false; }
scrollNub.onmouseout = function () { this.mobile = false; }
nubArea.onmousemove = function (e) {
if(scrollNub.mobile) {
coords = getMouseCoordsWithinEventTarget(e);
scrollNub.style.top = coords.y;
} }
I thought maybe having an onmouseout event on the nub which cancels its
motion might have be the problem, so I moved that event onto the
containing div by changing that line to:

nubArea.onmouseout = function () { scrollNub.mobile = false; }

That didn't seem to make any difference.

So I tried taking it out altogether:
http://weston.canncentral.org/web_la...roll-var2.html

That seems to change the behavior -- you do see some movement of the
scrollNub, but it's jumpy and more than a little wonky. Releaseing the
mouse click doesn't seem to stop movement. When the nub is moving, it
seems to jump back and forth between the top and the mouse position.

I'm thinking there's something I'm missing about how events are being
fired and caught, but I'm open to any feedback. Thanks!

May 12 '06 #1
3 7129
In message <11**********************@i40g2000cwc.googlegroups .com>,
weston <no***********************************@canncentral .org> writes
I'm making a foray into trying to create custom vertical scrollbars and
sliders, and thought I had a basic idea how to do it, but seem to be
having some trouble with the implementation.
Why reinvent the wheel? - take a look at script.aculo.us - this is
already done for you.
http://localhost/additional/ScrollBar/testscroll.html


I think you'll find the only person that can see that is you. localhost
is by definition on the machine you are using and not visible to anyone
else.

Stephen
--
Stephen Kellett
Object Media Limited http://www.objmedia.demon.co.uk/software.html
Computer Consultancy, Software Development
Windows C++, Java, Assembler, Performance Analysis, Troubleshooting
May 12 '06 #2
Stephen Kellett wrote:
localhost is by definition on the machine you are using and not visible to anyone else.

Very, very true, and I really, really meant to post the non-local link:

http://weston.canncentral.org/web_la...estscroll.html
Why reinvent the wheel? - take a look at script.aculo.us - this is

already done for you.

I've certainly considered using scriptaculous. It can certainly save me
time.... but I'm not sure it can help me find out where my
misconceptions are. Hence my coming here to ask questions about my
non-working solution. :)

May 12 '06 #3
weston wrote:
I'm making a foray into trying to create custom vertical
scrollbars and sliders, and thought I had a basic idea
how to do it, but seem to be having some trouble with
the implementation.

My thinking was:

(a) create a div for the slider / scroll nub to move within
(b) attach event handlers which, onmousedown, specify the
slider/nub is moveable, and onmouseup, specify it's not
It would be a good idea for the handler that stops process to also carry
out a final positioning action so that your 'nub' doesn't stop short of
the user's intended final position.
(c) attach an event handler to the contaning div which,
onmousemove, checks to see if the slider/nub is moveable,
and if it is, bring it to the y-coordinate of the mouse
within the containing div
Remember that the mosemoeve events are generated with _every_ pixel to
pixel transition so attempting to have the browser do any significant
number of calculations and re-draw the display at that rate can be
problematic.

My preferred pattern for this type of thing is along the lines of:-

1. Import animation timer and an efficient page-relative mouse
position reporting scripts (search the group's archive (at, for
example, google groups) for "TimedQue" and "MoveFollow" in posts
by me for examples of both (they have evolved over time so look
for the most recent source)).
2. Onmousedown in the container; flag 'dragging' as active and attach
a document-level onmouseup handler to stop the dragging (so any
mouse-up on the page will stop the process). (for IE it is also
useful to start a document-level onselectstart handler that
cancels the default action of drag selection). Finally a
positioning function is registered with the animation timer
component, that uses the difference between the current
page-wide mouse co-ordinates and the element's page co-ordinates
to work out where the nub is supposed to be placed and places it
there (this function is only triggered at 40+ millisecond
intervals as that is good enough for user interaction and
infrequent enough that the browser (usually) does not get bogged
down trying to keep up).

My TimedQue component keeps executing its function arguments at
intervals until the function returns false (or, while it doesn't return
true). The positioning function then returns the 'dragging' flag so that
it will keep being executed at intervals until the mouseup event re-sets
the flag to false. The positioning function takes the form:-

function potion(){
if(dragging){
/*
Work out the mouse's position relative to the container
using the page-wide mouse positing reporting facility
(the page co-ordinates of the element only need to be
worked out onmousedown and stored at that point) and
potion the 'nub' t that point.
*/
}
return dragging;
}

The mouse up function does (in order):-

1. Remove the document-level mouseup listener (and the onselectstart,
and any other pertinent, listeners).
2. Directly calls the - position - function, so that the 'nub' is in
the correct final position.
3. Sets the 'dragging' flag back to false. (the animation component
drops the position function as a result)

Here's an implementation... that sortof works:

http://localhost/additional/ScrollBar/testscroll.html
Even if that URL worked I would not look at it. You have a situation
that is simple enough to be presented here as the code for a fully
'working' a cut-down test case that demonstrates the issue in isolation.
And external link to the same demonstration on-line may satisfy the
preferences of some but I read Usenet off-line and will not re-connect
to the Internet just to look at source code.
You can see ... <snip>

Two assumptions too far.
My code looks something like this (full listing available
via view source):

nubArea = document.getElementById('nubAreaDiv');
scrollNub = document.getElementById('scrollNubImg');
scrollNub.mobile = false;
scrollNub.onmousedown = function () { this.mobile = true; }
scrollNub.onmouseup = function () { this.mobile = false; }
scrollNub.onmouseout = function () { this.mobile = false; }
nubArea.onmousemove = function (e) {
if(scrollNub.mobile) {
coords = getMouseCoordsWithinEventTarget(e); ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Two (at least) elements may be originating mosemove events that bubble
up to your - nubArea - element. So even if your -
getMouseCoordsWithinEventTarget - produces reliable offsets when the
mouse is moving over the 'nub' the generated Y offset will be the offset
over the 'nub' and when it is outside the 'nub' it will be the offset
from the - nubArea - element. As the handler than moves the 'nub' to the
offset all offsets from the - nubArea - should move the 'nub' under the
mouse, and then offsets over that area may move the 'nub' towards the
top of its container. The result will likely be jittery.

You probably want to forget about offsets from targets and only be
calculating offsets from the - nubArea - element (so the event's
(possible) built-in target offset properties will not help here).
scrollNub.style.top = coords.y;
}
}

<snip>

If you are not already familiar with the issue, it would be a good idea
for you to do some research into the "IE memory leak problem" (google
for it) as this script does produce the 'circular' reference chains that
are at the root of the issue.

Incidentally, the reason for learning to do this for yourself, rather
than using other people's scripts, is that if you do not know how to do
it for yourself you are not going be in a position to judge whether a
third party script is suitable. Will have to trust its author to have
seen and properly addressed all the issues, and will find yourself
limited in what you can achieve by the availability of third party
scripts (that is, you will never be employable as a javascript author).

Richard.
May 13 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Richard van Wegen | last post by:
Dear All I want to use the horizontal scrollbar control, but I can't figure out how to change the width of the slider, i.e. the bit that you drag left & right. With other controls (eg Textbox),...
5
by: Z | last post by:
Hi, I have problem with auto-scrolling frames in IE (6.0 on Xp, but same happens with IE 5.5 on Win2k): If I set scrolling="auto" to frame, IE reserves space where vertical scrollbar normally...
3
by: buht | last post by:
Hello Everyone, Fairly new to c# here and have a question regarding scrollbars, particularly a vertical scrollbar. It looks like my options are restricted for the textbox scrollbars being...
1
by: rh | last post by:
Hi, is there a property on the VScrollbar to activate this feature or is custom coding required? This feature exists on MS Word's vertical scrollbar and I would like to add this feature to my...
3
by: Olivier BESSON | last post by:
Hello, I have a web service of my own on a server (vb.net). I must declare it with SoapRpcMethod to be used with JAVA. This is a simple exemple method of my vb source : ...
1
by: 123456prakash | last post by:
Does anyone know if it is possible to set programmatically the position of a JScrollPane vertical scrollbar slider? I load a some components like textfield editorpane labels etc into a panel...
3
by: Nebulism | last post by:
Hi everyone, I am working on a module for my GUI that shows one image with an index value below and would use a scrollbar to control which of the images are displayed. The images are stored in a...
1
by: Tom | last post by:
First, I posted a similar request for help in another group and now don't find the posting. Problem with my newsreader perhaps ... but apologies if this appears as a cross posting. My code is...
0
by: Renuka | last post by:
can anyone help me how to develop custom vertical scrollbar using only 3 images like uparrow image, thumb image, downarrow image. plz help me -- Renuka
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.