I have some simple javascript that determines where a click happens within a browser here:

    var clickDoc = (document.documentElement != undefined && document.documentElement.clientHeight != 0) ? document.documentElement : document.body;
    var x = evt.clientX;
    var y = evt.clientY;
    var w = clickDoc.clientWidth != undefined ? clickDoc.clientWidth : window.innerWidth;
    var h = clickDoc.clientHeight != undefined ? clickDoc.clientHeight : window.innerHeight;
    var scrollx = window.pageXOffset == undefined ? clickDoc.scrollLeft : window.pageXOffset;
    var scrolly = window.pageYOffset == undefined ? clickDoc.scrollTop : window.pageYOffset;

    params = '&x=' + (x + scrollx) + '&y=' + (y + scrolly) + '&w=' + w + '&random=' + Date();

All of this data gets stored in a DB. Later I retrieve it and display where all the clicks happened on that page. This works fine if I do all my clicks in one resolution, and then display it back in the same resolution, but this not the case. there can be large amounts of resolutions used.

In my test case I was clicking on the screen with a screen resolution of 1260x1080. I retrieved all the data and displayed it in the same resolution. But when I use a different monitor (tried 1024x768 and 1920x1080. The marks shift to the incorrect spot.

My question is, if I am storing the width and height of the client, and the x/y position of the click. If 3 different users all with different screen resolutions click on the same word, and a 4th user goes to view where all of those clicks happened, how can I plot the x/y position correctly to show that everyone clicked in the same space, no matter the resolution?

If this belongs in a better section, please let me know as well.