I have a div
and I want it to be shown at the exact same position as the hovered element inside the iframe
. It gets the height and width correct tho, but not the top and left. What am I doing wrong? How to make it get the correct element position?
Here's the code:
<html>
<body>
<div>
<div id="box"></div>
<p id="a">You clicked on:</p>
<iframe
id="zzz"
srcdoc="<html><h1>hello</h1><button> click </button></html>"
width="500"
height="500"
></iframe>
</div>
<script>
let elem = "";
let myiframe = document.getElementById("zzz").contentWindow;
let div = document.getElementById("box");
myiframe.addEventListener("mouseover", function (e) {
elem = e.target;
var rect = elem.getBoundingClientRect();
x = rect.left;
y = rect.top;
w = rect.width;
h = rect.height;
document.getElementById("a").innerHTML =
elem.tagName + " width: " + w + " height: " + h;
div.style.display = "block";
div.style.position = "absolute";
div.style.width = w;
div.style.height = h;
div.style.left = x;
div.style.top = y;
});
</script>
<style>
#box {
border: blue 1px solid;
height: 25px;
width: 50px;
display: none;
}
</style>
</body>
</html>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Comments
Post a Comment