Javascript get an Element's position relative to the screen's top left corner

Answer for the Stack Overflow question: http://stackoverflow.com/questions/37626549/javascript-get-an-elements-position-relative-to-the-screens-top-left-corner

by Michael Gaskill

HTML

<div id="top">
  <div class="inner" id="a">
    Inner 1
    <p>
      Pos = <span class="pos">???</span>
    </p>
  </div>
  <div class="inner" id="b">
    Inner 2
    <p>
      Pos = <span class="pos">???</span>
    </p>
  </div>
  <div class="inner" id="c">
    Inner 3
    <p>
      Pos = <span class="pos">???</span>
    </p>
  </div>
</div>

CSS

#top {
    padding: 40px;
}

.inner {
    margin: 25px;
    border: 1px solid black;
}

JavaScript

var pageX;
var pageY;

window.onmousemove = setMouseCoordinates;

function setMouseCoordinates (e) {
    window.onmousemove = null;

    pageX = e.screenX - e.clientX;
    pageY = e.screenY - e.clientY;

    updatePositions();
}

function getScreenCoordinatesOf(elem) {
    var pos = {};
    console.log("Elem: ", elem, " Left: ", elem.offsetLeft, " Top: ", elem.offsetTop);
    pos.x = pageX + elem.offsetLeft;
    pos.y = pageY + elem.offsetTop;
    return pos;
}

function updatePositions() {
    $(".inner").each(function() {
      var inner = $(this);
      pos = getScreenCoordinatesOf(inner[0]);
      console.log("Element: ", inner.attr("id"), " Pos: ", pos);
      inner.find(".pos").text("X: " + pos.x + " Y: " + pos.y)
    });
}