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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post

    Question Record the MouseDown location, check witht eh MOuseUp location and if same show Menu

    Hello Everyone,

    I'm new still at Javascript and I'm trying to do something like this:

    Code:
    table.onmousedown {
          f_pos_x = //Set the First X Location
          f_pos_y = //Set the first Y location
    });
    table.onmousedown {
          s_pos_x = //Set the Second X Location
          s_pos_y = //Set the Second Y Location
          if ("f_pos_x" == "s_pos_x" && "f_pos_y" == "s_pos_y") {
                set_tab('new2_tabs', 'tile_options');
          });
    });
    I have a click and drag map, where as if they click on a tile, I would like the menu to show, but I was havign the problem where if you click and drag again this menu would change so I need to record the mousedown location and check with the mouse up location and if they are the same then show the new menu.

    Best Regards,
    Tim

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Useful information at quirksmode.

    Comparing the coords before and after may prove unreliable, but I can't be certain of this. Another possibility is to set a flag/variable onmousedown and clear it onmousemove.. But I'm just speculating
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    
    function MouseDown(e){
     e=e||window.event;
     var obj=e.target?e.target:e.srcElement;
     while (obj.parentNode){
      if (obj.nodeName.toUpperCase()=='TD'){
       break;
      }
      obj=obj.parentNode;
     }
     if (obj.nodeName.toUpperCase()=='TD'){
      if (MouseDown.obj==obj){
       alert('the same TD');
      }
      MouseDown.obj=obj;
     }
    }
    
    
    </script>
    
    </head>
    
    <body>
    <table width="150" height="50" border="1" onmousedown="MouseDown(event);" >
      <tr>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
      </tr>
    </table>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Excuse me, but you are working *WAY* too hard.

    You don't *REALLY* care if the mouse has move 2 pixels, right? And that's very likely to happen with a human hand controlling the mouse.

    So, instead, just check to see if the mouse is in the SAME TILE!

    Like this:
    Code:
          // set up all the cells:
          for ( var r = 0; r < theMap.length; ++r )
          {
              var row = theMap[r];
              var tr = tbl.insertRow(-1);
              for ( var c = 0; c < row.length; ++c )
              {
                  var cell = tr.insertCell(-1);
                  cell.id = (theMap.length - r - 2) + ":" + (c+1-5);
                  cell.className = classes[row.charAt(c)];
                  cell.onmouedown = cellClickStart;
                  cell.onmouseup  = cellClickEnd;
              }
          }
    
          ...
    
      var whereButtonDown = null;
    
      function cellCickStart( )
      {
          whereButtonDown = this;
      }
      function cellClickEnd( )
      {
          var bDown = whereBUttonDown;
          whereBUttonDown = null; // RESET IT!
    
          if ( bDown != this ) /* have we moved to a different tile? */
          {
              /* yes...so treat it as a drag: */
              mouseDragged( bDown, this );
              return;
          }
    
          // still in same cell, so just treat as a click & show menu:
          clk.innerHTML = this.id;
          typ.innerHTML = this.className;
          pop.style.display = "block";
      }
    
      function mouseDragged( fromCell, toCell )
      {
          .. you can write this ..
      }
    New/changed stuff in red.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If, as stated, this is a click and drag map them presumably the target-tile will be the same for both mouseup and mousedown.

    You might consider my earlier suggestion:

    Code:
    var justClick = false;
    
    someElement.onmousedown = function () {
        justClick = true;
    }
    someElement.onmousemove = function () {
        justClick = false;
    }
    someElement.onmouseup = function () {
        if (justClick) {
            // show menu..
            return;
        }
    }
    Although it's hard to be certain without further information.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,184
    Thanks
    75
    Thanked 4,340 Times in 4,306 Posts
    Ahh...good point. If it's truly a drag. But I don't *THINK* it is. I think he's really trying to use this to move a playing piece from one tile to the next. Well, I guess we shall see.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Regular Coder
    Join Date
    Nov 2010
    Posts
    390
    Thanks
    48
    Thanked 1 Time in 1 Post
    Thank you to vwphillips, Old Pedant and AndrewGSW.

    I did not have Firefox on this system, and upon installing it and testing the website for myself, everything seemed to work.

    I spoke to my friend again and he still doesn't remember seeing anything last night but did when I asked him again.

    best Regards,
    Tim


  •  

    Posting Permissions

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