SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looping through an onMouseDown event

    Hey guys I have the following code, what this does is moves a div around the screen when a button is pressed, what I would like to do is be able to hold the button down and the div carries on moving, can someone please lend me a hand in modifying it.

    Thanks in advance

    HTML Code:
    </style>
    <script type='text/javascript'>
    window.onload = function()
    {
      var mvr = document.getElementById('mover');
      mvr.style.left = '400px';
      mvr.style.top = '300px';
      var i, panel = document.getElementById('panel');
      var btns = panel.getElementsByTagName('div');
      for (i = 0; i < btns.length; i++) {
        btns[i].onmouseover = btnOnClick;
      }
    }
    function btnOnClick()
    {
      var delta = 20;
      var mvr = document.getElementById('mover');
      var x = parseInt(mvr.style.left);
      var y = parseInt(mvr.style.top);
      switch (this.id) {
        case 'btnU':
          y -= delta;
          break;
        case 'btnR':
          x += delta;
          break;
        case 'btnD':
          y += delta;
          break;
        case 'btnL':
          x -= delta;
          break;
      } // end switch
      mvr.style.left = x + 'px';
      mvr.style.top = y + 'px';
    }
    </script>
    Last edited by webnoob; Dec 20, 2006 at 08:51.
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi webnoob

    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Mover</title>
    <style type='text/css'>
    body {
      margin: 0;
      padding: 0;
      width: 100&#37;;
      height: 100%;
      overflow: hidden;
    }
    #mover {
      position: absolute;
      overflow: hidden;
      width: 100px;
      height: 100px;
      background: #9cc;
      border: 1px solid #900;
    }
    #panel {
      position: relative;
      left: 20px;
      top: 20px;
      width: 100px;
      height: 100px;
      padding: 0;
      margin: 0;
      background: #cc9;
      border: 1px solid #009;
    }
    .btn {
      position: absolute;
      overflow: hidden;
      left: 0;
      width: 96px;
      height: 24px;
      padding: 0 2px;
      cursor: pointer;
      font-size: 18px;
      color: #000;
    }
    #btnU {
      top: 0;
      text-align: center;
    }
    #btnR {
      left: 48px;
      top: 38px;
      width: 48px;
      text-align: right;
    }
    #btnD{
      top: 76px;
      text-align: center;
    }
    #btnL {
      top: 38px;
      width: 48px;
      text-align: left;
    }
    </style>
    <script type='text/javascript'>
    var btnDown = null, moverId = 'mover', moverTmr = null;
    window.onload = function()
    {
      var mvr = document.getElementById(moverId);
      mvr.style.left = '400px';
      mvr.style.top = '300px';
      var i, panel = document.getElementById('panel');
      var btns = panel.getElementsByTagName('div');
      for (i = 0; i < btns.length; i++) {
        btns[i].onmousedown = btnOnMousedown;
        btns[i].onmouseup = btnOnMouseup;
      }
    }
    function btnOnMouseup()
    {
      btnDown = null;
      if (moverTmr) {
        clearTimeout(moverTmr);
      }
    }
    function btnOnMousedown()
    {
      if (!btnDown) {
        btnDown = this;
        btnMove();
      }
    }
    function btnMove()
    {
      var delta = 2, interval = 25;
      if (btnDown) {
        moverTmr = setTimeout(btnMove, interval);
      }
      else {
        return;
      }
      var mvr = document.getElementById(moverId);
      var x = parseInt(mvr.style.left);
      var y = parseInt(mvr.style.top);
      switch (btnDown.id) {
        case 'btnU':
          y -= delta;
          break;
        case 'btnR':
          x += delta;
          break;
        case 'btnD':
          y += delta;
          break;
        case 'btnL':
          x -= delta;
          break;
      } // end switch
      mvr.style.left = x + 'px';
      mvr.style.top = y + 'px';
    }
    </script>
    </head>
    <body>
    <div id='panel'>
      <div id='btnU' class='btn'>Up</div>
      <div id='btnR' class='btn'>Right</div>
      <div id='btnD' class='btn'>Down</div>
      <div id='btnL' class='btn'>Left</div>
    </div>
    <div id='mover'></div>
    </body>
    </html>

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your a genius, thats exactly how I thought it needed to be done I just didnt know how to do it on JS, lol. Thanks again Mike

    p.s while your here, any chance you could explain why I cant make it go diagonal, with the switch statement i try adding 4 new ones and instead of just moving up, I set it to move up and left, but it doesnt seem to work??
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    At My Desk!!
    Posts
    1,642
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    scratch that, I managed to get it to work, this JavaScript lark is quite interesting
    "Am I the only one doing ASP.NET in Delphi(Pascal)?"

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

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