javascript - How to recalculate x,y coordinates based on screensize -

i'm have heat map application , store store x,y coordinates of click , viewport width , height. real data 2 clicks:

x,   y,   width, height 433, 343, 1257,  959 331, 823, 1257,  959 

the issue when resize screen on responsive site, displayed clicks off. i'm coming empty on searches there formula or algorithm recalculate x , y coordinates different resolutions. example, first click, if width goes 1257 990 , height goes 959 400, how recalculate x , y line in same spot?

edit: added 2 fields database, width_percentage , height percentage store x percentage of width , y percentage of height. if x 433 , width of screen 1257 x 35% left edge of screen. used same theory height , ran calculations did not scale click dot same spot though percentages scaling resolutions. testing clicking on full resolution 1257 width reopening @ 900 width. see below code display click dots @ lower resolution.

ajax php

while ($row = mysql_fetch_array($results)) {    if( $_get['w'] < $row['width'] ) {     $xcorr = $row['width_percentage'] * $_get['w'];     $ycorr = $row['y'];    } } 

this uses $_get variable, passing width , height of screen resolution on page load. gets click dots database $results. since scale resolution width 1257 900 did not put in calculation height , same pixel initial click. new width multiplied percentage , set dot percentage margin left of screen. since percentage 35% new x coordinate becomes 900 *.35 = 315px left edge. did not work , i'm still scratching head on head keep click in same spot responsive sites.

you can acheive jquery:

$( window ).resize(function() {   //ur code }); 

javascript

window.onresize = resize;  function resize() {  alert("resize event detected!"); } 

if working on mobile devices use 1 also

$(window).on("orientationchange",function(event){   alert("orientation is: " + event.orientation); });