I have divs with class=myDiv
. I need to do this logic: on mouse over, I want to show a popup in the middle of the div.
For that I have the following:
$(.myDiv).mouseover(function () {
positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});
function positionDiv(xPosition ,yPosition ) {
$(#popupWindow).css(left, xPosition + px);
$(#popupWindow).css(top, yPosition + px);
$(#popupWindow).show();
}
The CSS:
.popupWindow{
position:absolute;
width:313px;
height:383px;
display:none;
}
This will position the popup window in the middle of the div on mouse over. Everything works great at this point.
However, if the website is zoomed in (using the browser zoom functionality), tHe position will get messed up. The popup window no longer appears in the middle of myDiv
.
Any idea what might be the problem?
Edit:
For more info, if it is created and I zoom it, it is fine. But when I move my mouse to another myDiv
and the new popup appears in a weird position. The left and top attribute of the Div are messing up.