Mapping mouse click coordinates on heatmap for different resolution & screen sizes in JS/Jquery

Question

I would like to collect mouse click data from a webpage which is accessed on different resolutions & screen size devices and accurately map those click coordinates on an overlay for displaying heatmap. How can I do it in JavaScript/jQuery? Also, considering the case when the page being displayed can be scrolled up/down and browser window resized anytime by the user thus changing the relative positions of the DOM elements at the screen. For example, I have a main div wrapper as container of the documents and two divs as columns inside. Normally, the columns will be shown side by side to each other inside the wrapper div. But when the user resizes the page to a smaller size, the column to the right will move and sit under the 1st column. So, its X and Y offset has changed according to the page. Now, if a user clicks on this 2nd column, the clicks won't map accurately to screen when I see the heatmap on my device in full page viewI'm a beginner, so I would need to know the details.

I have a working solution for a fixed width but as the browser is resized or scrolled, the click data gets messed up and is not accurate. I would like to add the code which sets this up. — Anil Kumar
@json: Okay. Let me put it this way. I have main div wrapper as container of the documents and two divs as columns inside. Normally, the columns will be shown side by side to each other inside the wrapper div. But when the user resizes the page to a smaller size, the column to the right will move and sit under the 1st column. So, its X and Y offset has changed according to the page. Now, if a user clicks on this 2nd column, the clicks won't map accurately to when I see the heatmap on my device in full page view. — Anil Kumar
@JSfellow please edit it in your question.so,that you will get maximum answers. — Kundan

Rahul Jain Rahul Jain · Accepted Answer · 2016-08-03T18:06:09

I am working on same thing to collect click coordinates to be plotted on heatmap. The method I used is to get the click coordinate and converting them into pixel average relative to the document and then when plotting again convert them into coordinates.

window.addEventListener("click",function(){

    var posx = 0;
    var posy = 0;
    TotalX = document.body.scrollWidth; 
    TotalY = document.body.scrollHeight;
    if (!e) {
        var e = window.event;
    }
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    console.log("X" + ((posx * 100)/TotalX)); //Just For Debugging
    console.log("Y" + ((posy * 100)/TotalY)); // For Debugging
    return {
        x : ((posx * 100)/TotalX),
        y : ((posy * 100)/TotalY)
    };

});

The coordinates are not found relative to document would work pretty well in desktop clicks but Not with mobile clicks. You can put a condition to avoid mobile clicks or can record them differently.

Mapping mouse click coordinates on heatmap for different resolution & screen sizes in JS/Jquery

1 Answers