Issue
I want to display a dot at specific pixel on image click. I'm displaying it by giving top and left values in %. What happening is the dot isn't moving when clicked another pixel present inside the dot. When click outside then it is moving. I don't understand why this is happening.
May be it is because there is very small change in top and left values for each pixel.
I've updated CSS for displaying dot within the circle
.hObiiS{
border: solid 1px #303030 !important;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-sizing: border-box;
box-shadow: none !important;
height: 9px !important;
position: absolute;
transform: translate3d(-50%, -50%, 0);
width: 9px !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hObiiS::before{
position: absolute;
content: '';
width: 1px;
height: 1px;
background-color: rgb(224, 1, 1);
border-radius: 50%;
}
<div class="hObiiS" style="top: 25.4601%; left: 58.6382%;"></div>
Can someone please provide solution to move dot per pixel ?
Solution
Here is your problem solution.
let container = document.querySelector('img');
let dot = document.getElementById('dot');
document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
var parentPosition = getPosition(container);
var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
dot.style.left = xPosition + "px";
dot.style.top = yPosition + "px";
}
});
// Helper function to get an element's exact position
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}.container {
position: relative;
cursor: "crosshair";
}
#dot {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
display: inline-block;
background-color: red;
transform: translate(100, 0);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
<span id="dot" />
</div>
</body>
</html>Your mouse click position (e.clientX and e.clientY) is relative to your browser's top-left corner that's why your click position is not accurate. You can study the details explanation in this article. Move Element to Click Position
Answered By - Mudasir H Answer Checked By - Pedro (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.