Email conversation
| From | Jared Hewitt |
|---|
| To | Me |
|---|
| Subject | Draggable layer sticks to the mouse. |
|---|
| Date | 27 December 2004 20:04 |
|---|
Hi,
I want to start of by saying that your site is great! I have a lot of
respect for people who try to help others. I often spend my free time
helping people with server emulation for popular games (UO, Lineage2, etc.)
So I wanted to say good job and keep teaching!
Anyway, here's a problem I noticed with the Draggable layers script. I'd
like to use it to allow people to view an image closer up, but avoid them
having to configure their pop-up blockers to allow pop-ups from my site.
But while I was playing around with it I noticed something awkward. In
Mozilla Firefox if you drag the layer down and the mouse cursor touches the
bottom of the window, the layer becomes stuck to the mouse. Also if you do
the same thing in Internet Explorer except drag it to any side of the
browser it causes the layer to stick as with Mozilla Firefox. If at some
point you switch from the picture layer to the red layer with text after
you have created the above error it ends up dragging the new layer around
with the mouse.
I was wondering if it would be possible to fix this? I was thinking about
another howto I saw on your site that discussed getting the window
height/width and I considered using this to try and fix the error, but
being new to JavaScript I wouldn't know where to begin editing to make it
work.
Here is the location I found the Height/Width tutorial:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
This is the sample script on the Height/Width page:
[copy of my alertSize function from that page]
If there's any suggestions or tips you can give me that would be great!
I'm currently working on a xxxxxxxx site for an xxxxxx my friends and I are
designing. It doesn't currently have any javascript in it (I'm alot better
with PHP than with JavaScript) but maybe with a few of your tutorials that
will change.
I just put it up yesterday so it's not much to look at but here is the URL:
[sample address - that doesn't work, by the way :) - IE gives an error page,
Opera and Mozilla present a download dialog saying the server sent the
wrong Content-Type header]
Thanks in advance for any help.
| From | Me |
|---|
| To | Jared Hewitt |
|---|
| Subject | Re: Draggable layer sticks to the mouse. |
|---|
| Date | 27 December 2004 21:11 |
|---|
Jared,
unfortunately, this is a limitation of this sort of script. To get the best
effect, I stop the drag when I detect the mouseup anywhere over the page.
(This means that even if they move so quickly the DHTML reflow-engine has
problems keeping up, I will still detect it.) It is not possible to detect
when the mouse button is released over the browser interface.
Your idea of detecting the mouse moving out of the document area is not
possible either unfortunately. Yes, I can check the window width, but that
will not help, as it is not possible to detect mouse movements once the
mouse moves outside that area, so I would not be able to actually tell if
they had moved outside it, or just stopped for a while right on the edge.
In theory I could use onmouseout on the document to check, but several
browsers (new ones like Mozilla/Firefox, or old ones like Escape)
incorrectly detect this event as you move over text on the page, and this
would produce completely the wrong effect.
I also cannot have a "dead-zone" around the edges, as when you move quickly,
the mouse jumps several pixels at a time, so it may never be detected.
I thought about this for a long time when I first wrote the script, but I
eventually came to the conclusion that there is nothing that I can do. I
just have to hope that they release the button over the page. If not, they
will need to click on the page to make it stop following them.
It is unfortunate, but it is the the best that can be done.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/