My goal is to accurately determine mouse coordinates within the page elements.
To see the code in action, please visit: http://jsfiddle.net/t8w9k6gu/
$('#p1, #p2, #p3').on('click mousemove touchmove', function(ev){
var target = ev.originalEvent.currentTarget;
var offset = $(target).offset();
var x = ev.originalEvent.pageX;
var y = ev.originalEvent.pageY;
$(coords).html(x + ', ' + y);
$(elm).html(target.id + ' {' + offset.left + ', ' + offset.top + '}');
});
var main = $('#main');
var content = $('#content');
var zoom = $('#zoom');
var coords = $('#coords');
var scroll = $('#scroll');
var zoomv = 0.5;
$(content).css({zoom: zoomv});
$('#headh').html($('#head').height());
$('#headsize').on('click', function(ev){
$('#headbig').toggle();
$('#headh').html($('#head').height());
});
$('#zoomin').on('click', function(){
zoomv += .1;
$(content).css({
zoom: zoomv
});
$(zoom).html(zoomv);
});
$('#zoomout').on('click', function(){
if(zoomv < .2){
return;
}
zoomv -= .1;
$(content).css({
zoom: zoomv
});
$(zoom).html(zoomv);
});
$(main).on('scroll', function(ev){
$(scroll).html($(main).scrollLeft() + ', ' + $(main).scrollTop());
});html, body{
margin:0;
padding:0;
}
#head{
border:2px #880 solid;
}
#headbig{
border:2px #ccc dashed;
height:50px;
display: none;
}
#main{
overflow:auto;
height:186px;
background-color:#f00;
}
#content{
height:0;
position:relative;
overflow:visible;
background-color: #00f;
}
#p1, #p2, #p3{
background-color:#0ff;
margin:10px;
width:600px;
height:800px;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div id="head">
<input type="button" id="zoomin" value="Zoom in" />
<input type="button" id="zoomout" value="Zoom Out" />
<input type="button" id="headsize" value="Resize head" />
<br />
Mouse coords: <span id="coords">0, 0</span>
<br />
Element offset: <span id="elm">null, 0, 0</span>
<br />
Main scroll: <span id="scroll">0, 0</span>
<br />
Content zoom: <span id="zoom">0.5</span>
<br />
Head height: <span id="headh">0</span>
<div id="headbig"></div>
</div>
<div id="main">
<div id="content">
<div id="p1">
<h1>Page 1</h1>
</div>
<div id="p2">
<h1>Page 2</h1>
</div>
<div id="p3">
<h1>Page 3</h1>
</div>
</div>
</div>
</div>In this scenario, each page element measures 600x800 pixels.
The objective is to obtain accurate mouse positions within any of the page elements regardless of zoom level, scrollbar positions, or head element size.
For instance, if the mouse cursor is at the bottom right corner of a page element, the coordinates should consistently be {600,800}. The top-left corner of the page should always read {0,0}, and the center of the page should yield {300,400}. This calculation must remain independent of zoom, scroll, or head size adjustments.
I've experimented with different methods involving mouse event values (pageX/pageY), page element offsets, scroll positions, zoom levels, but I'm yet to arrive at the most effective way to compute positions within the page elements correctly.
The structure of this layout cannot be modified as it's part of a more intricate application. As such, I am seeking guidance on how to calculate these positions precisely with the existing layout intact.
This functionality should work seamlessly on PC Chrome browser, as well as mobile iOS Safari and Android Chrome browsers.
Any assistance, recommendations, or suggested readings would be highly appreciated.
Edit:
The closest approximation I've achieved so far has been by utilizing getBoundingClientRect to calculate positions as follows:
var bb = target.getBoundingClientRect();
var x = ev.originalEvent.pageX / zoomv - bb.left;
var y = ev.originalEvent.pageY / zoomv - bb.top;
See the updated Jsfiddle here: http://jsfiddle.net/t8w9k6gu/1/
While this approach meets my current requirements, there may still be room for improvement. Therefore, I welcome any suggestions for enhancement.