Search code examples
jscripthta

How can I make a button avoid the mouse in hta?


I have tried many ways to make the button avoid the mouse. I have tried all the onmouse functions, yet they don't seem to work, btw I am trying to make the button get the size of the computers screen, and make the button move all around the screen. Here is the code that I have:

<body onload="WindowResize()">

<div class="align-topleft">
    <button onmouseover="moveObj(this)" id="ClickMe" class="btn" type="button">Click Me...</button>
</div>

<script>
function moveObj(obj){
var w = window.screen.width, h = window.screen.height; // width and height
newWidth = Math.floor(Math.random() * w);
newHeight = Math.floor(Math.random() * h);
obj.style.position="absolute";
obj.style.left=newWidth+"px";
obj.style.top=newHeight+"px";
}
function checkObj(event,obj){
var top = obj.style.top.split("px")[0];
var left = obj.style.left.split("px")[0];
if(top+5 > event.y || left+5 > event.x){moveObj(obj);}
}
//--></script>

<script>
function WindowResize()
{
    window.screen.width
    window.screen.height
}
</script>

</body>
</html> 

Solution

  • It's easier if you make use of the HTA:Application option windowState=maximize. You also need an adjustment after each random to ensure the entire button is on screen. Here's the cleaned up code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <hta:application
      id=oHTA
      windowState=maximize
      border=none
      scroll=no
    >
    <style>
    .btn {width:100px}
    </style>
    </head>
    <body>
    <script>    
    var w = window.screen.width, h = window.screen.height;
    
    function moveObj(obj){
      newWidth = Math.floor(Math.random() * w);
      newHeight = Math.floor(Math.random() * h);
      if(newWidth>w-100){newWidth=newWidth-100;}
      if(newHeight>h-20){newHeight=newHeight-20;}
      obj.style.position="absolute";
      obj.style.left=newWidth+"px";
      obj.style.top=newHeight+"px";
    }
    function checkObj(event,obj){
      var top = obj.style.top.split("px")[0];
      var left = obj.style.left.split("px")[0];
      if(top+5 > event.y || left+5 > event.x){moveObj(obj);}
    }
    </script>
    
    <div class="align-topleft">
        <button onmouseover="moveObj(this)" id="ClickMe" class="btn" type="button">Click Me...</button>
    </div>
    </body>
    </html>
    

    Note: Press Alt-F4 to exit