Absolute position after zooming

Question

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.

Answer 1

You don't need JS for this:

http://jsfiddle.net/coma/6VUpS/1/

The key is to play with CSS and avoid JS calculations. The container div (myDiv) should be position: relative, the popup must be inside and position: absolute, top and left to 50% and using negative margins to center it (http://www.css-101.org/negative-margin/06.php).

Try avoiding JS for visual fanciness, only CSS ensures the correct position even on zoom since it's rendered by the browser.

HTML

<div class="myDiv">
    Hi!
    <div class="popupWindow">you are welcome!</div>
</div>

CSS

div.myDiv {
    padding: 10px;
    background-color: #eee;
    margin: 50px 0;
    position: relative;
}

div.popupWindow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    width: 200px;
    line-height: 100px;
    background-color: #111;
    color: #fff;
    text-align: center;
    display: none;
    pointer-events: none;
}

div.myDiv:hover > div.popupWindow {
    display: block;
}

Bonus track using a checkbox to click/tap/toggle popup and some fade in:

http://jsfiddle.net/coma/6VUpS/3/

More hacky:

http://jsfiddle.net/coma/6VUpS/

More complex example:

http://jsfiddle.net/coma/dHTHG/