CODEWITHSUNDEEP
javascripthtml
azrm
azrm

Reputation: 199

Is it possible to make inputs in a Mousetracker?

I would like a div that follows the cursor. But you should have the possibility to make inputs in the div. Unfortunately I can only get it that the div follows the cursor, but the cursor does not enter the div.

Or Something like this: Is it possible that the cursor is trapped in the div? Until he either breaks off or enters. If the cursor moves to the border, the div should move in the appropriate direction. (The close function is currently not present in the code, but I can solve that myself.)

var MicrosoftModel=0;
var xplus=10,yplus=10;
var runnerobject;

                          
function MouseAction(mausx,mausy)
{
    
  runnerobject.left=mausx+xplus;
  runnerobject.top=mausy+yplus;
}

function MouseMove(event)
{
    
  var mausx,mausy;
  if (typeof(event)!="object")              
    return;
  if (MicrosoftModel)                     
  {
      document.getElementById("runner").style.display = "none!important";
    mausx=event.clientX;
    mausy=event.clientY;
    if (document.body.scrollLeft)
      mausx+=document.body.scrollLeft;
    if (document.body.scrollTop)
      mausy+=document.body.scrollTop;
  }
  else                                    
  {
    mausx=event.pageX;
    mausy=event.pageY;
  }
  MouseAction(mausx,mausy);
}

          
function MouseInit()
{
    document.getElementById("runner").style.display = "none!important";
  if (document.all)         
  {
    MicrosoftModel=1;
    window.onmousemove=MouseMove;
    runnerobject=document.all.runner.style;
  }
  if (!(MicrosoftModel))                  
  {
    if (typeof(document.addEventListener)=="function")
                                         
    {
      document.addEventListener("mousemove",MouseMove,true);
      runnerobject=document.getElementById("runner").style;
    }
    else
    if (document.runner)                 
    {
      window.captureEvents(Event.MOUSEMOVE);
      window.onmousemove=MouseMove;
      runnerobject=document.runner;
    }
  }
}
body { 
  background-color: black; 
}

.cursor-catcher{ 
  background: hsla(0, 0%, 100%, 0.70);
  max-width: 644px;
  width: 100%;
  padding: 22px 36px 22px 36px;
}

.x{
  border-radius: 5px;
  border: solid 1px black;
  width: 10px;
}
<body onLoad="MouseInit();" onMouseMove="MouseMove(event);">

<div name="runner" id="runner" style="position:absolute; left:10; top:50;">
<div class="cursor-catcher">
    <h2>Newsletter</h2>
    Name: <input type="text" name="fullname"><br>
    Email: <input type="text" name="email"><br> 
    <br>
    <div class="x">x</div>
</div>
</div>

</body>

Upvotes: 0

Views: 110

Answers (1)

Emmanuel Delay
Emmanuel Delay

Reputation: 3679

It works pretty well, I think this is the idea. (no buffer needed).

I added your form (I ignored style, you can put it back)

And now, as requested, it doesn't go heigher than 100px from the top

<head>
<style>
#my_div {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#my_div {
  width: 300px;
  height: 150px;
  background: #ff0000;
  position: absolute;
}
</style>
<script>
var my_div;
topIgnore = 100;  // (in pixel units) used for function ignoreTop

window.onload = function() {
  my_div = document.getElementById('my_div');
  var my_div_style = window.getComputedStyle(my_div);
  var width_div = parseInt(my_div_style.width, 10);  // remove 'px' from string
  var height_div = parseInt(my_div_style.height, 10);
  // make sure the property exists, else you can get a NaN
  my_div.style.left = 0;
  my_div.style.top = 0;
  // event
  window.onmousemove = function(e) {
    // my_div.innerHTML = e.pageX +' - '+ (leftBorder + width_div) +' - '+ width_div;
    cursorIsInsideDiv(e);
  }
  // TO DO: feel free to make similar functions for left/right/bottom
  // removes the first 100px
  function ignoreTop(top) {
    if(top < topIgnore) {
      return topIgnore;
    }
    return top;
  }
  function cursorIsInsideDiv(e) {
    var leftBorder = parseInt(my_div.style.left, 10); // remove 'px' from string
    var topBorder  = parseInt(my_div.style.top, 10);  
    // move left 
    if( e.pageX <  leftBorder ) {
      my_div.style.left = e.pageX + 'px';
    }
    // move right
    else if( e.pageX >  (leftBorder + width_div)) {
      my_div.style.left = (e.pageX - width_div ) + 'px';
    }
    // move up 
    if( e.pageY <  topBorder ) {
      var top = e.pageY ;
      top = ignoreTop(top);
      my_div.style.top = top + 'px';
    }
    // move down
    else if( e.pageY >  (topBorder + height_div)) {
      my_div.style.top = (e.pageY - height_div ) + 'px';
    }
  }
}
</script>
</head>
<body>
<div id="my_div">
  <h2>Newsletter</h2>
  Name: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
</div>
</body>

Original post:

<head>
  <style>
    #my_div {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    #my_div {
      width: 100px;
      height: 100px;
      background: #ff0000;
      position: absolute;
    }
  </style>
  <script>
    var my_div;
    window.onload = function() {
      my_div = document.getElementById('my_div');
      my_div_style = window.getComputedStyle(my_div);
      var width_div = parseInt(my_div_style.width, 10);  // remove 'px' from string
      var height_div = parseInt(my_div_style.height, 10);
      // event
      window.onmousemove = function(e) {
        my_div.innerHTML = e.pageX + ',' + e.pageY + '<br/>' + width_div + ',' + height_div;
        my_div.style.left = e.pageX - Math.floor(width_div/2);
        my_div.style.top  = e.pageY - Math.floor(height_div/2);
      }
    }
  </script>
</head>
<body>
  <div id="my_div"></div>
</body>

Works pretty well, pretty cool effect.

Of course you don't need that my_div.innerHTML line.

Any more specific features you need (there was an edit to your question, maybe I missed something) ?

Upvotes: 1

Related Questions