jQuery Snippet - Relative Mouse Position

For whatever reason, there may be times when the mouse position relative to the page document is just not specific enough. Sometimes you may want the position as it relates to a specific element. Maybe you want the position of something in an image, maybe you are just curious, it doesn't matter. What does matter is that you want those coordinates. Thankfully, with jQuery, we can easily do this.

In this demo, you can clearly see two sets of coordinates. One relates to the entire HTML document, and the other pair relates specifically to the div, with the top left corner being the zero point. To do this, all we need is to subtract the element's "offset" from the current mouse coordinates:

What this function does is take in an element's ID and the mouse position, then it subtracts the elements css offset from the mouse coords. This magical "offset" is not to be confused with the css property offset, rather it is a calculated total offset in relation to the HTML document. Such things as padding and margins can effect this offset, and thankfully jQuery does all this calculating for us.

You never know when the relative mouse position might come in handy, and now you know how to get it using jQuery. This wraps it up for this short one, just remember that when you need coding help, all you have to do is Switch On The Code.