Question

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 1260×1080. I retrieved all the data and displayed it in the same resolution. But when I use a different monitor (tried 1024×768 and 1920×1080. 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.

:::EDIT::: After applying brock’s suggestions, I have attached two screenshots. I clicked on the word If at the beginning of each paragraph in different resolutions. When viewing in both those resolutions, the clicks that happened in the same resolution are directly on the word, when it’s a higher or lower resolution, it shifts to the right or left, respectively.

http://img291.imageshack.us/img291/5682/1260×1080.png
http://img27.imageshack.us/img27/8950/1920x1080c.png%20

Answer 1

Update:
Additional issues to consider, the problem may not be perfectly solvable…

1. At different screen sizes, things like margins (for centered content) will be different. Need to adjust to where “screen size” really becomes the clientWidth after compensating for changing margins.

2. Also, despite everything, a page just might render differently at different screen resolutions (plus whatever size the user has his browser window at). If this causes lines to wrap differently, it will really throw off comparisons.

---

Original Answer:

“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”

This should just be a simple scaling problem.

Pseudo code:
Given:

CapturedMousePosition   = {X and Y coordinates of logged machine, in pixels}    //-- EG  [42, 69]
CapturedScreenSize      = {width and height of logged machine, in pixels}       //-- EG  [1260, 1080]
TargetScreenSize        = {width and height of display machine, in pixels}      //-- EG  [1024, 768]
/*-- Note that client size and/or view-port size, are what we mean by "screen size" here.  
    This is because the browser will use some unknown fraction of the PC's display resolution.
*/

Then:

TargetMousePosition     = CapturedMousePosition * TargetScreenSize / CapturedScreenSize
EG: [42 * 1024 / 1260, 69 * 768 / 1080] -- Be sure to round to *nearest* integer.