Calculating Coordinates

This JavaScript code example demonstrates how to calculate corrdinates for mouse events.

CalculatingCoordinates.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<script type="text/javascript" src="CalculatingCoordinates.js"></script>
	</head>
	<body>
		<div style="position:relative;left:20px;top:30px;width:400px;height:300px;overflow: auto;border:1px #444444 solid;background-color:black;">
			<div style="position:absolute;left:145px;top:30px;width:500px;height:400px;background-color:yellow;"
				onmousemove="OnMouseMove(event)"></div>
		</div>
		<div style="position:relative;left:20px;top:40px;">
			<p id="idOffset"></p>
			<p id="idScroll"></p>
			<p id="idPage"></p>
			<p id="idClient"></p>
			<p id="idRelative"></p>
			<p id="idParent"></p>
			<p id="idScrollParent"></p>
		</div>
	</body>
</html>

CalculatingCoordinates.js

function OnMouseMove(e) {
	let qCurrElement = e.target;
	qCurrElement.style.cursor = 'pointer';
	let qOffset = document.getElementById("idOffset");
	qOffset.innerHTML = "Offset = ( "+qCurrElement.offsetLeft+", "+qCurrElement.offsetTop+" )";
	let qScroll = document.getElementById("idScroll");
	qScroll.innerHTML = "Scroll = ( "+qCurrElement.scrollLeft+", "+qCurrElement.scrollTop+" )";
	let qPage = document.getElementById("idPage");
	qPage.innerHTML = "Page = ( "+e.pageX+", " +e.pageY+" )";
	let qClient = document.getElementById("idClient");
	qClient.innerHTML = "Client = ( "+e.clientX+", "+e.clientY+" )";
	
	let dElementOffsetX = 0;
	let dElementOffsetY = 0;
	let qTempElement = qCurrElement;
	do{
		dElementOffsetX += qTempElement.offsetLeft - qTempElement.scrollLeft;
		dElementOffsetY += qTempElement.offsetTop - qTempElement.scrollTop;
		qTempElement = qTempElement.offsetParent;
	} while(qTempElement != document.body);
	
	let dRelX = e.pageX - dElementOffsetX;
	let dRelY = e.pageY - dElementOffsetY;
	
	let qRelative = document.getElementById("idRelative");
	qRelative.innerHTML = "Relative = ( "+dRelX+", "+dRelY+" )";
	
	let dParentX = dRelX + qCurrElement.offsetLeft;
	let dParentY = dRelY + qCurrElement.offsetTop;
	let qParent = document.getElementById("idParent");
	qParent.innerHTML = "Parent Relative = ( "+dParentX+", "+dParentY+" )";
	
	let qParentElement = qCurrElement.parentElement; // Same as offsetParent
	let qScrollParent = document.getElementById("idScrollParent");
	qScrollParent.innerHTML = "Parent Scroll = ( "+qParentElement.scrollLeft+", "+qParentElement.scrollTop+" )";
}

Core JavaScript

Calculating Coordinates

CalculatingCoordinates.html

CalculatingCoordinates.js

Output