JQ | Get the distance between two points

In this example below you will see how to do a JQ | Get the distance between two points with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Tobias Bogliolo , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Tobias Bogliolo ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>JQ | Get the distance between two points</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="box">
  <div class="line-join"></div>
  <div class="dot-center"></div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tobiasdev/jq-or-get-the-distance-between-two-points-pWrwYp */
/* Area */
.box {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #FFF9FD;
  cursor: pointer;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #DDD2EF;
  z-index: -1;
}

.box:before {
  width: 90% !important;
}

.box:after {
  height: 90% !important;
}

/* Dots */
div[class^="dot"] {
  position: absolute;
  width: 26px;
  height: 26px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #FFEB3B;
  border-radius: 100%;
  -webkit-box-shadow: 1px 1px 5px ;
  box-shadow: 2px 2px 12px #FBC02D;
}

.dot-cursor {
  position: relative;
  animation: in cubic-bezier(.34,-0.31,.46,1.99) .5s forwards;
}

@keyframes in {
  0% {
    width: 0px;
    height: 0px;
  }

  100% {
    width: 26px;
    height: 26px;
  }
}

/* Tooltip */
.dot-cursor:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: -35px;
  left: 50%;
  margin-left: -10px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #B39DDB;
  border-radius: 3px;
}

.dot-cursor:after {
  content: attr(data-content);
  position: absolute;
  top: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 12px 24px;
  background: #B39DDB;
  font-family: sans-serif;
  font-size: .8em;
  color: #FFFFFF;
  letter-spacing: .1em;
  font-weight: bold;
  border-radius: 5px;
}

/* Line */
.line-join {
  position: absolute;
  width: 0;
  height: 1px;
  top: 50%;
  left: 50%;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: translate(-100%, -0%);
  -ms-transform: translate(-100%, -0%);
  -o-transform: translate(-100%, -0%);
  transform: translate(-100%, 0%);
  background: #9575CD;
  transition: ease 1s;
}

.line-join:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: -3px;
  left: 0;
  background: #9575CD;
  border-radius: 100%;
}


/*Downloaded from https://www.codeseek.co/tobiasdev/jq-or-get-the-distance-between-two-points-pWrwYp */
/*
===============================================================

Hi! Welcome to my little playground!

My name is Tobias Bogliolo. 'Open source' by default and always 'responsive',
I'm a publicist, visual designer and frontend developer based in Barcelona. 

Here you will find some of my personal experiments. Sometimes usefull,
sometimes simply for fun. You are free to use them for whatever you want 
but I would appreciate an attribution from my work. I hope you enjoy it.

===============================================================
*/

//Get the distance between two points:
function getDistance(x1, y1, x2, y2){
  return Math.sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) );
};

//Get the angle between two points:
function getAngle(x1, y1, x2, y2){
  return Math.atan2(y2-y1, x2-x1) * 180 / Math.PI;
};

//Mmmm... let's do it!
$(".box").click(function(e){
  //Elements ('dots'):
  var $centerDot = $(".dot-center");
  var $newDot = $(".dot-cursor");
  //Remove last 'dot' (if it exists):
  if ($newDot.length > 0){ $newDot.remove() };
  //Get center position:
  var centerX = ($centerDot.offset().left + $centerDot.width()/2) - $(this).offset().left;
  var centerY = ($centerDot.offset().top + $centerDot.height()/2) - $(this).offset().top;
  //Get cursor position:
  var cursorX = e.clientX - $(this).offset().left;
  var cursorY = e.clientY - $(this).offset().top;
  //Get distance between points:
  var dotsDistance = Math.round( getDistance(cursorX, cursorY, centerX, centerY) );
  //The 'dot':
  var newDot = `<div class="dot-cursor" style="top:${cursorY}px; left:${cursorX}px;" data-content="${dotsDistance}"></div>`;
  //Append 'dot':
  $(this).append(newDot);
  //Get angle (degrees):
  var dotsAngle = getAngle(cursorX, cursorY, centerX, centerY);
  //Line join:
  $(".line-join").css({
    "width": dotsDistance,
    "transform": "translate(-100%, -0%) rotate("+dotsAngle+"deg)"
  });
  //Debug:
  //console.log(dotsDistance);
  //console.log(dotsAngle)
});

Comments