Screen Coordinates of a element, via Javascript

by

window.screenX/Y are not supported on IE. But for other browsers, a close approximation of position is:

var top = $("#myelement").offset().top + window.screenY;
var left = $("#myelement").offset().left + window.screenX;

Exact position depends on what toolbars are visible. You can use the outer/innerWidth and outer/innerHeight properties of the window object to approximate a little closer.

IE doesn’t provide much in the way of window properties, but oddly enough, a click event object will provide you with the screen location of the click. So I suppose you could have a calibration page which asks the user to “click the red dot” and handle the event with

function calibrate(event){
    var top = event.screenY;
    var left = event.screenX;
}

Or possibly use the mouseenter/leave events using the coordinates of that event to calibrate. Though you’d have trouble determining if the mouse entered from the left, right, top, or bottom.

Of course, as soon as they move the screen you’ll need to recalibrate.

For lots more on browser property compatibilities see PPK’s Object Model tables.

More Related Contents:

  1. .prop() vs .attr()
  2. Check if an image is loaded (no errors) with jQuery
  3. Get selected text from a drop-down list (select box) using jQuery
  4. How to hide a in a menu with CSS?
  5. Find DOM element by ID when ID contains square brackets?
  6. Difference between “change” and “input” event for an `input` element
  7. Why are duplicate ID values not allowed in HTML?
  8. What is difference between width, innerWidth and outerWidth, height, innerHeight and outerHeight in jQuery
  9. jQuery DOM changes not appearing in view source
  10. Is there a DOM event that fires when an HTML select element is closed?
  11. How to detect when an iframe has already been loaded
  12. jQuery: how to change tag name?
  13. How can I remove all CSS classes using jQuery/JavaScript?
  14. Count immediate child div elements using jQuery
  15. Converting a recursive function into an asynchronous CPS implementation (javascript)
  16. jQuery/Javascript – How to wait for manipulated DOM to update before proceeding with function
  17. Convert String to XML Document in JavaScript
  18. JavaScript moving element in the DOM
  19. How to set DOM element as first child?
  20. JQuery html() vs. innerHTML
  21. JQuery – animate moving DOM element to new parent?
  22. Open new window without focus on it [duplicate]
  23. window.getSelection return html [duplicate]
  24. Attaching events after DOM manipulation using JQuery ajax
  25. Unloading/Removing content from an iFrame
  26. jQuery difference between :eq() and :nth-child()
  27. What’s the difference between a jQuery object and a DOM element? Difference between .get() and .index()?
  28. In web browsers, what’s the difference between onblur and onfocusout?
  29. Create a table in SVG
  30. Removing element with jQuery?

Leave a Comment