I have an element that I'm checking the click event for it. and when it clicked I want to add a div element based on the coordinates of the event.The code is here:
$('.quick-popup-icon').click(function (e) {
var popup = document.createElement("div")
popup.style.top = e.pageY + "px"
popup.style.marginLeft = e.pageX + "px"
popup.style.position = "absolute"
document.body.append(popup)
}
When the body position isn't relative it's working fine and the element is adding in the exact coordinates. But when our body has a relative position and we need to scroll everything falls apart. And because our application is a Chrome extension I can't change the position of the body. Here is my question specifically: How can I append an element with the absolute position in a document with the relative position with getting the event coordinates.
The reason why everything falls apart when the body is position: relative; is that an absolute element inside of a relative or absolute positioned parent element is affected by the position of the parent element.
For example, if you have a relative div 200px from the left of the body and 500px from the top of the body, and you have an absolute div inside of that relative div with top: 0; and left: 0, the absolute div will by 0px from the top and left of the parent div. Here's an example:
.parent {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border: 1px solid;
}
.child {
background: blue;
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
}<div class="parent">
<div class="child"></div>
</div>However, in the same case, if we were to make the child have a position of fixed, top:0 and left:0 would make it go to the top-left corner of the page.
Example:
.parent {
position: relative;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border: 1px solid;
}
.child {
background: blue;
width: 50px;
height: 50px;
/* just changed this line */
position: fixed;
top: 0;
left: 0;
}<div class="parent">
<div class="child"></div>
</div>Basically, just make your pop up position: fixed.
EDIT If you can't see the div, adding a z-index to the fixed element can help.
let me know if something doesn't working as you want so we can solve this together. explaination at code desc.
$('.quick-popup-icon').click(function (e) {
const pY = $(this).offset().top, pX = $(this).offset().left;
$('<div></div>')
.css({
'top' : (e.clientY - pY ) + "px",
'left' : (e.clientX - pX ) + "px"
})
.appendTo( $('body') );
});
// The .offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) relative to the document.
// The clientX property returns the coordinate (according to the client area) of the mouse pointer
// A demonstration of the differences between clientX and clientY and screenX and screenY: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_mouse_screenxy_clientxybody{
position:relative;
}
body>span{
display:block;
position:relative;
background:gray;
width:50%;
min-height:100px;
}
body>div{
position:absolute;
width:10px;
height:10px;
background:red;
z-index:1000;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="quick-popup-icon"></span>I think you are looking for this. Best of luck.
$(function () {
$('.quick-popup-icon').click(function (e) {
var popup = document.createElement("div")
popup.style.top = e.pageY + "px"
popup.style.left= e.pageX + "px"
popup.style.position = "absolute"
popup.style.background="red"
popup.style.width="50px"
popup.style.height="50px"
document.body.append(popup)
})
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body style="position: relative;">
<div style="background:#228877">
<span style=" display:block;width: 100%;height: 200px" class="quick-popup-icon"></span>
</div>
</body>