...

View Full Version : JavaScipt: Measuring change in mousemove/mousedown/mouseup (cross browser)



JPx
06-17-2004, 01:27 PM
Hi.

My first post in the forum so be gentle :). I'm not that familiar with javascript but I've done something with it in the past. Now I need to write this simple script that allows me to to simple measurements (change in x and y coordinates) in a picture (or in a table or whatever). This sounds like a easy task even for me but for some reason my script doesn't work the way it's supposed to. I need a cross browser solution or at least one that works with the mainstream browsers such as IE5/IE6, Opera 6.x+, Mozilla, later Netscape versions and so on.

This version below basicly works just fine with Opera but won't work with IE and Mozilla browsers (I haven't even tested it with Netscape browsers). With those it allows mousemove for just a few pixels. That's what puzzles me. I don't think it's a big change I need to do but I just can't figure it out. Any help would be appreciated.

I cleaned up my script just a little bit for easier viewing and that version is here:




<html>
<body>
<head></head>

<SCRIPT language="JavaScript">

if(!window.event && window.captureEvents)
{
// set up event capturing for mouse events (add or subtract as desired)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN|Event.MOUSEUP|Event.ALERT);

// set window event handlers (add or subtract as desired)
window.onmousedown = WM_getCursorHandler;
window.onmousemove = WM_getCursorHandler;
window.onmouseup = WM_getCursorHandler;
//window.alert = WM_getCursorHandler;

// create an object to store the event properties
window.event = new Object;
}

function WM_getCursorHandler(e)
{
// set event properties to global vars (add or subtract as desired)
window.event.clientX = e.pageX;
window.event.clientY = e.pageY;
window.event.x = e.layerX;
window.event.y = e.layerY;
window.event.screenX = e.screenX;
window.event.screenY = e.screenY;

// route the event back to the intended function
if ( routeEvent(e) == false )
{
return false;
}
else
{
return true;
}
}

var x,y,nx,ny;

function Click()
{
x = window.event.x;
y = window.event.x;
}

function Move()
{
window.status = "X:" + window.event.x + " Y:" + window.event.y;
}

function Calc()
{
nx = (window.event.x - x) / 14;
ny = (window.event.y - y) / 14;

nx = nx.toFixed(2);
ny = ny.toFixed(2);
ny = (ny - (ny * 2));

window.alert("Result:\n\nChange in X: " + nx + " s\nChange in Y: " + ny + " mV");
}

</script>

<BR><CENTER><IMG src="./image.jpg" height="500" width="500" border="1" OnMouseMove="Move()" OnMouseDown="Click()" OnMouseUp="Calc()">
<BR>
</body>
</html>

JPx
06-18-2004, 07:59 AM
Wow... it's so quiet that I can almost hear my own thoughts. Didn't know I had any. Seriously... anybody?

quamtar
06-18-2004, 08:12 AM
I don't have time to go through your whole page right now and test it, but I did notice one thing:

Mozilla/Netscape does not have window.event so when getting the x position (for example) you will have to handle both browsers by doing something like this:

function myFunction(e) {
var x = ((window.event)?window.event.x : e.pageX);
}


I have a javascript color picker that does calculations based on the mouse position. I have the code posted on my blog. You can download it, maybe looking through the code will give you some ideas on what you are doing wrong.

You can get it here: http://csharpboard.com/AdminsBlog/

I hope this helps some.

JPx
06-18-2004, 11:01 AM
I hope this helps some.

Thanks. I'll check that but don't know if it's gonna help. The thing is that the script works just fine but it only allows the measurement for ~10 pixels with IE and Mozilla. Just to make that clear:

With IE/Mozilla:

1. I push down the left mouse button
2. I start to move the cursor slowly => x and y position changes in the status bar but after ~10 pixels the cursor changes into the symbol which means something like stop or impossible (Round shape with line across it)
3. After that the alert window won't appear. If I release the button within those ten pixels, everything works just fine.

If you have time to check into it later, I'd appreciate it very much.

Vladdy
06-18-2004, 01:37 PM
Doubt it works in Opera 6 - it has atrocious support of DOM, but may work in Opera 7. Tested in Moz and IE 6 (should work 5.5 as well):
www.vladdy.net/demos/cropimage.html

JPx
06-18-2004, 04:10 PM
Doubt it works in Opera 6 - it has atrocious support of DOM, but may work in Opera 7. Tested in Moz and IE 6 (should work 5.5 as well):
www.vladdy.net/demos/cropimage.html

Thanks for that. I'll go through it as soon as I have time to do so. Before that I'll keep hitting my head to a wall by editing my own script which isn't that far away from working. God I'm starting to hate js. I guess there was a reason for going with server side languages but what can you do.

Anyway... I did some serious browsing and came up with this script below. Well... it basicly works fine on my computer (Opera7, Moz, IE6) but if I upload it to a server... well let's just say that it does things it's not supposed to do. Maybe I messed up something. I'll go things over again after I get some sleep.



<html>
<head>
<SCRIPT language="JavaScript">

// Set Netscape up to run functions
if (document.layers) { // Netscape
document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN|Event.MOUSEUP);
document.onmousemove = Move;
document.onmousedown = Click;
document.onmouseup = Calc;
} else if (document.all) { // Internet Explorer
document.onmousemove = Move;
document.onmousedown = Click;
document.onmouseup = Calc;
} else if (document.getElementById) { // Netcsape 6
document.onmousemove = Move;
document.onmousedown = Click;
document.onmouseup = Calc;
}

var x,y,nx,ny;

function Move(e) {
if (document.layers) {
window.status = "X:" + e.pageX + " Y:" + e.pageY;
} else if (document.all) {
window.status = "X:" + window.event.x + " Y:" + window.event.y;
} else if (document.getElementById) {
window.status = "X:" + e.pageX + " Y:" + e.pageY;
}
}


function Click(e)
{
if (document.layers) {
x = e.pageX;
y = e.pageY;
} else if (document.all) {
x = window.event.x;
y = window.event.y;
} else if (document.getElementById) {
x = e.pageX;
y = e.pageY;
}
}

function Calc(e)
{
if (document.layers) {
nx = (e.pageX - x) / 14;
ny = (e.pageY - y) / 14;
nx = nx.toFixed(2);
ny = ny.toFixed(2);
ny = (ny - (ny * 2));
} else if (document.all) {
nx = (window.event.x - x) / 14;
ny = (window.event.y - y) / 14;
nx = nx.toFixed(2);
ny = ny.toFixed(2);
ny = (ny - (ny * 2));
} else if (document.getElementById) {
nx = (e.pageX - x) / 14;
ny = (e.pageY - y) / 14;
nx = nx.toFixed(2);
ny = ny.toFixed(2);
ny = (ny - (ny * 2));
}
window.alert("Mittauksen tulos:\n\nAjan muutos: " + nx + " s\nKorkeuden muutos: " + ny + " mV");
}
</SCRIPT>
</head>

<body>

<BR><CENTER>

<TABLE width="500" height="500" background="./inc/image.jpg" border="1">
<TR>
<TD></TD>
</TR>
</TABLE>
<BR>

<A href="javascript:window.close();" vAlign=bottom>Sulje ikkuna</A><BR><BR>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum