PDA

View Full Version : Mouse dragging script not working with FF and Chrome



rad70
Mar 18th, 2011, 04:58 PM
Hi,
I was wondering if anyone could help me out with a script I'm trying to create/customize.
The idea is to scroll an image by dragging of the mouse (like you have with Google maps for example), instead of the scrollbars.
Right now I'm using a script that does the job perfectly fine under IE, but not so much under FireFox, and definitely not under Chrome.
Some additional code is probably needed but I have no clue how to write proper JavaScript. Everything I try gives errors and leaves me baffled.

Here's a hands-on example of what I mean (works only under IE!): http://home.wanadoo.nl/r.a.dekk/kaart/kaart.html

This is the script I'm using now:

<!-- <script type="text/javascript">

document.onmousedown = function(){
var e=arguments[0]||event;
var x=document.body.scrollLeft+e.clientX;
var y=document.body.scrollTop+e.clientY;
document.onmousemove=function(){
scroll(x-e.clientX, y-e.clientY);
return false;
}
document.onmouseup=function(){
document.onmousemove=null;
}
return false;
}

</script>
//-->
Any help will be appreciated.
Thanks.

xelawho
Mar 18th, 2011, 05:21 PM
your html appears to have some errors which may be causing problems - see here (http://validator.w3.org/check?uri=http%3A%2F%2Fhome.wanadoo.nl%2Fr.a.dekk%2Fkaart%2Fkaart.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

and the last line of your code: <AREA SHAPE="circle" COORDS="4975,624,10" HREF="7.jpg" appears to be unfinished compared to the rest of it.

maybe if you fix those things it will be clearer what is happening?

rad70
Mar 19th, 2011, 02:13 AM
Looks like it cut off part of the closing html, when I took it out of the original page, to isolate my main issue. This one is just for sample purposes only you see, since it would just unnecessarily confuse and distract to show the full page (which, incidently, doesn't have those errors).
The errors should be fixed now, though.
Sorry if this was obfuscating the relevant operations of the script for you.

xelawho
Mar 19th, 2011, 04:09 AM
no, the errors are still there if you care to look. I see it works in IE, but IE is showing syntax errors in all three of your js files, but I guess you can see that, too...

rad70
Mar 19th, 2011, 07:35 PM
Ugh.. I should probably have checked with IE myself (I use FF as default).
The HTML errors should now be fully fixed, though. It's also cleaned up more, isolating just the issue now.

TinyScript
Mar 19th, 2011, 07:52 PM
document.onmousedown = function(e){
e=!e?window.event:e;
....
}
this is how you get the event in IE without breaking all the good browsers.

xelawho
Mar 19th, 2011, 07:54 PM
I'm not sure, but it looks to me like your problem may be related to this (http://homepage.ntlworld.com/kayseycarvey/jss3p2.html).

good luck!

TinyScript
Mar 19th, 2011, 09:14 PM
document.onmousedown = function(e){
e=!e?window.event:e; //arguments[0]||

var x=(e.pageX||e.clientX)-document.body.scrollLeft ;
var y=(e.pageY||e.clientY)-document.body.scrollTop;

this.onmousemove=function( ev){
ev=!ev?window.event:ev;

scroll(x+ev.clientX, y+ev.clientY);
return false;
}
this.onmouseup=function(){
document.onmousemove=null;
}
return false;
}

rad70
Mar 19th, 2011, 10:51 PM
Unfortunately that script isn't working correctly, TinyScript.
It does move about in FF now but I can't drag it. It keeps snapping back to the previous point the mouse was clicked, as if some variable isn't updating, or something.. I replaced it with my old script so you can experience what I mean.
Perhaps you could have another look at it?
Thank you for trying, though!

rad70
Mar 21st, 2011, 08:36 AM
Is there anyone else who can get this script to work properly?

rad70
Mar 29th, 2011, 04:52 PM
I'm starting to believe that my problem is too complicated to ever be solved.

*bump*

Calvert Tripesi
Apr 1st, 2011, 05:28 AM
The trend is for the content to move with the cursor, not against it.

DragScroll (http://scripterlative.com/files/dragscroll.htm) will solve your problem, although under I.E. a graphic that size will still be clunky on some systems.

rad70
Apr 2nd, 2011, 08:02 PM
The trend is for the content to move with the cursor, not against it.

DragScroll (http://scripterlative.com/files/dragscroll.htm) will solve your problem, although under I.E. a graphic that size will still be clunky on some systems.
That script did the trick! :D
My long search is finally over!
Thank you very much!!! :thumbsup: