How to log a click at an xy coordinate that remains reliable regardless of page design

Question

I'm creating a website heat map. I know how to get the xy coordinate of a click, but on pages in centered divs the xy coordinate of the click varies based on the user's browser window width.

How do I log a consistent xy so that I can display the location of the click later regardless of the window size?

I can use jQuery's offset() to get the xy based on some centered parent element. But I'm placing this heat map on multiple sites. So given that each site's markup is unique, how do I determine what top level "wrapper" element should be used to calculate the offset?

Is there some simpler method I'm overlooking?

Programming to "guess" at a site's wrapper element sounds like it could be unreliable. Is there any chance it would be useful to take the browser width and the x offset and use them to calculate the x offset from the centre instead of from the left? Depends on your end goal, I guess. — Rick, Feb 21 '12 at 21:03
I totally agree that guessing the wrapper isn't an option. Shoot, there may be multiple wrappers. I know heat map services exist so this is a solvable problem. — Cory House, Feb 21 '12 at 22:55

Jasper · Answer 1 · 2012-02-21T21:10:07.820

How about saving not only the x/y coordinates of the click but also the width/height of the view-port. That way you can get the position of the click relative to the view-port and calculate where on the content the click actually occured:

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = $(window).width(),
        h = $(window).height();
});

You could optimize this by only getting the view-port dimension when they change:

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = event.pageX,
        y = event.pageY,
        w = windowWidth,
        h = windowHeight;
});

Update

For pages that are centered you could get the coordinate from the center of the view-port:

var windowWidth  = 0,
    windowHeight = 0;

$(window).on('resize', function () {
    windowWidth  = $(this).width();
    windowHeight = $(this).height();
}).trigger('resize');//this .trigger will get the dimensions on page-load

$(document).on('click', function (event) {
    var x = (event.pageX - (windowWidth / 2)),
        y = event.pageY;
});

This will result in positive x dimensions for anything on the right side of the page and negative x dimensions for anything on the left side of the page.

Here is a demo: http://jsfiddle.net/aWBFM/

So you're suggesting logging clicks differently based on whether the content of the page is centered or not? But any div on the page may be centered, even something deeply nested which will potentially impact its xy position when the window is resized. — Cory House, Feb 22 '12 at 03:54

score 0 · Answer 2 · answered Feb 21 '12 at 20:59

0

Have you tried using the <body> element? I know in HTML5 it isn't necessary, but I haven't ever come across an instance where it isn't used (and there is clicking involved).

answered Feb 21 '12 at 20:59

Tango Bravo

3,221
3
22
44

It's the tag's children that pose the problem. If a click is within a
wrapper that is floated centered then the x/y changes based on window width.
– Cory House Feb 21 '12 at 21:56

score 0 · Answer 3 · answered Feb 21 '12 at 21:01

Well according to the offset() documentation it retrieves the coordinates relative to the document, which is what you want. What you need to do is get the window height and width. Then using a bit of maths, calculate the distance between the window and the map.

$(window).width() and $(window).height() will get you what you need.

score 0 · Answer 4 · answered Feb 21 '12 at 21:07

0

You should be able to get the position of the mouse relative to the top left corner of the page by looking at event.clientX and event.clientY.

If you want the position of the mouse relative to a particular object, you can look at the offsetTop and offsetLeft properties of that object. (event.clientX - obj.offsetLeft) would be the position of the mouse relative to the object.

answered Feb 21 '12 at 21:07

mikepr

663
8
14

"would be the position of the mouse relative to the object." Right, and the quesiton is relative to what object. It's the crux of my question: Since this heat map will be deployed on multiple sites, I have no idea what parent wrapper the clicks should be relative to, if any. – Cory House Feb 21 '12 at 21:58

How to log a click at an xy coordinate that remains reliable regardless of page design

4 Answers4

Update