How to recalculate position of marker inside div with vh html,css,js

Question

I trying to create a map framework for some games and i have a problem with recalc position of marker. Look url to test, with wheel you can resize div with image but the dot red not come back to own position. Sorry but im new on this y trying to learn more about js and css. Thanks

$('.map-live').css('width', "928px");
$('.map-live').css('height', "928px");
$('.map-live').css('background-size', "100%");
$('.map-live').bind('mousewheel DOMMouseScroll', function(event) {
  var divSize = $('.map-live').css('width');
  console.log(divSize);
  divSize = divSize.replace('px', '')
  divSize = parseInt(divSize);
  console.log("oldSize: " + divSize);
  var delta_px = event.originalEvent.wheelDelta > 0 ? (divSize + (divSize * 0.15)) : (divSize - (divSize * 0.15));
  console.log("NewSize: " + delta_px);
  $(this).css('width', delta_px + "px");
  $(this).css('height', delta_px + "px");
  $(this).css('background-size', "100%");

  UpdatePoints();
});

$(function() {
  $("#map-live").draggable();
});

document.getElementById('map-live').addEventListener('click', printPosition)

function getPosition(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left;
  var y = e.clientY - rect.top;
  return {
    x,
    y
  }
}

function printPosition(e) {
  var position = getPosition(e);
  console.log('X: ' + position.x + ' Y: ' + position.y);
  var divX = parseInt($('.map-live').css('width').replace('px', ''));
  var divY = parseInt($('.map-live').css('height').replace('px', ''));
  var vhX = (position.x / divX) * 100;
  var vhY = (position.y / divY) * 100;
  console.log('vhX: ' + vhX + ' vhY: ' + vhY);
}

function UpdatePoints() {
  $('.point').css('top', '2.477565353101834vh');
  $('.point').css('left', '2.477565353101834vh');
  $('.point').css('position', 'absolute');
}

body {
  margin: 0;
  overflow: hidden;
}

.map-live {
  position: absolute;
  left: 10px;
  z-index: 9;
  background-image: url(https://i.ibb.co/d2y5G1y/map.jpg);
  width: 222px;
  height: 222px;
  transition: all 0.2s linear;
}

.point {
  position: absolute;
  left: 2.477565353101834vh;
  top: 2.477565353101834vh;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="map-live ui-widget-content" id="map-live">
  <div class="point"></div>
</div>

jsfiddle.net/f84mto52

score 0 · Answer 1 · answered Sep 13 '20 at 08:11

0

Someone can correct me, but I believe your use of position: absolute is what is making the <div class="point"></div> stay in place.

answered Sep 13 '20 at 08:11

i tried with relative and sticky and not work too :( – Ivan Rodriguez Sep 13 '20 at 08:15

score 0 · Answer 2 · answered Sep 13 '20 at 09:54

Your UpdatePoints is setting always the same position in the div. With 'vh' you are calculating and absolute position proportional to viewport, no to parent container.

So, you are zooming the background image but the position (x, y) will be always be (x, y), positions are not zoomed. You need to recalculate which is the new position.

So you need to calculate new position.

function UpdatePoints(){
  var divW = parseInt($('.map-live').css('width').replace('px',''));
  var divH = parseInt($('.map-live').css('height').replace('px',''));
  var topPosition = (2.477565353101834 / 928) * divH;
  var leftPosition = (2.477565353101834 / 928) * divW;
  $('.point').css('top', topPosition+'vh');
  $('.point').css('left', leftPosition+'vh');
  $('.point').css('position', 'absolute');
}

Also, instead using 'vh' I recommend to calculate the px position instead. I have added the already calculated delta_px parameter to UpdatePoints function:

<style>
.point {
    position: absolute;
    left: 22.99180647678502px;
    top: 22.99180647678502px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}
</style>

<script>
function UpdatePoints(delta_px){
  var position = (delta_px/100)*2.477565353101834;
  $('.point').css('top', position+'px');
  $('.point').css('left', position+'px');
  $('.point').css('position', 'absolute');
}
</script>

Also, here we are calculating the top-left position of the .point element, not the position for the center. As it is a circle, it work fine, but if you use any other shape the position translation should be calculated from its center.

I recommend to do some research about how to translate elements. You can start here:

How to recalculate position of marker inside div with vh html,css,js

2 Answers2