calculate distance between two moving elements

Question

I'm trying to calculate the distance between two moving HTML elements.
For now, I'm making it move on :hover.
But the result doesn't change when it moves.

What's going wrong?

Here's my code:

var lFirst = $("#x").offset().left;
var lSecond = $("#y").offset().left;
var ldist = parseInt(lFirst - lSecond);

var tFirst = $("#x").offset().top;
var tSecond = $("#y").offset().top;
var tdist = parseInt(tFirst - tSecond);

$('#result').append(parseInt(tdist + ldist));

html, body{
  margin:0;
  padding:0;
}
*{
  transition:all 1s;
}
#x, #y{
  width:50px;
  height:50px;
  margin-left:0;
  margin-top:0;
  background:black;
}
#container{
  height:100vh;
  width:100vw;
  background:lightgrey;
}
#container:hover #x{
  margin-left:50vw;
}
#container:hover #y{
  margin-top:50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

View on JSFiddle

score 2 · Accepted Answer · answered May 25 '18 at 20:15

The result is only set once. You'll need to update it as objects move.
One solution is to update the value on a timer, using JavaScript's setInterval().
In the example below, I'm updating the result every 100 milliseconds.

var $x=$('#x');
var $y=$('#y');
var $result=$('#result');

function updateDistance() {

  var lFirst = $x.offset().left;
  var lSecond = $y.offset().left;
  var ldist = parseInt(lFirst - lSecond);

  var tFirst = $x.offset().top;
  var tSecond = $y.offset().top;
  var tdist = parseInt(tFirst - tSecond);

 $result.text(parseInt(tdist + ldist));

}

setInterval(updateDistance, 100);

html,
body {
  margin: 0;
  padding: 0;
}

* {
  transition: all 1s;
}

#x,
#y {
  width: 50px;
  height: 50px;
  margin-left: 0;
  margin-top: 0;
  background: black;
}

#container {
  height: 100vh;
  width: 100vw;
  background: lightgrey;
}

#container:hover #x {
  margin-left: 50vw;
}

#container:hover #y {
  margin-top: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="result"></div>
  <div id="x"></div>
  <div id="y"></div>
</div>

Theoretically, you could use a [Mutation Observer](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to detect changes to the DOM, but you'd need to change the positions by using the `style` attribute; see [Event detect when css property changed](https://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery). Or, you could use CSS animations and [listen for the animation's end](https://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes). But I'd say the `setInterval` method is simpler, given your existing code. — showdev, May 25 '18 at 20:30

score 0 · Answer 2 · answered May 25 '18 at 20:19

0

You can find how to get the (X,Y) coordinates of an html element here:

Retrieve the position (X,Y) of an HTML element

Once you have the (x,Y) coordinates, the distance is just a math problem:

distance = sqrt((x2-x1)^2 + (y2-y1)^2)

answered May 25 '18 at 20:19

Juan Francisco Carías Álvarez

111
1
1
4

score 0 · Answer 3 · answered May 25 '18 at 20:22

You will have to either set a JavaScript Timing Event to trigger on X time and update the info in your result div or set an event handler on the HTML element every time it moves so it updates the result.

setInterval(function, milliseconds)

//Repeats the execution of the function continuously.

calculate distance between two moving elements

3 Answers3