Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    JPx
    JPx is offline
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:

    Code:
    <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>

  • #2
    JPx
    JPx is offline
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow... it's so quiet that I can almost hear my own thoughts. Didn't know I had any. Seriously... anybody?

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    JPx
    JPx is offline
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by quamtar
    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.
    Last edited by JPx; 06-18-2004 at 11:14 AM.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #6
    JPx
    JPx is offline
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Vladdy
    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.

    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •