A Web Design Community curated by Chris Coyier

Code Snippets Gallery

Code Snippets > jQuery > Get X, Y Coordinates of Mouse Within Box Submit one!

Get X, Y Coordinates of Mouse Within Box

The below code will give you the X, Y coordinates of a mouse click within a given box. Removing all the stuff about the offset, you can easily get the X, Y coordinates of the click relative to the browser window.

$(function() {
$("#demo-box").click(function(e) {

  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);

  alert("X: " + relativeX + "  Y: " + relativeY);

});
});

Example

Click in the box below

4 Responses

  1. Ben says:

    Very cool trick!

  2. Robin says:

    I like thisone. It’s very usefull in future projects.

  3. I like it too, very simple and works well.

    thanks

Leave a Comment

Remember:
  • Be nice.
  • Wrap multiline code in <pre> and <code> tags and escape it first (turn <'s into &lt;'s).
  • You may use regular HTML stuff like <a href="">, <em>, and <strong>
* This website may or may not contain any actual CSS or Tricks.