Develop Reference

getting mouse coordinates correct when zooming the picture

Im trying to develop script where I can click on image and get the X/Y of the click. This part Ive implemented, the problem Im having occurs when I try to zoom the picture. Subseqent clicks on zoomed picture should return the same coordinates, and thats where I fail to success.
clicked(event) {
let pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft;
let pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop;
let offsetLeft = document.getElementById("textLayer").offsetWidth;
let offsetTop = document.getElementById("textLayer").offsetHeight;
console.log("zoom " + this.zoom);
console.log("pozycja x " + event.clientX/this.zoom);
console.log("pozycja y " + event.clientY/this.zoom);
console.log("szerokosc elementu " + offsetLeft);
console.log("wysokosc elementu " + offsetTop);
}
zoomView(): void {
this.zoom = this.zoom + 2.0;
}
this is what ihve wrote. And the template to the component:
<pdf-viewer style="position: absolute" id="textLayer" [src]="'http://localhost:8080/get.pdf'"
[page]="page"
[original-size]="true"
style="display: block;"
[zoom]="[zoom]"
(click)="clicked($event)"
></pdf-viewer>

since Ive found a solution =>
var x = event.pageX - (document.getElementById("textLayer").offsetLeft);
var y = event.pageY - (document.getElementById("textLayer").offsetTop);
console.log("zoom " + this.zoom);
console.log("pozycja x " + x/this.zoom);
console.log("pozycja y " + y/this.zoom);
console.log("szerokosc elementu " + offsetLeft);
console.log("wysokosc elementu " + offsetTop);
console.log("wysokosc elementussssssssssssss " + offsetTop);

Mouse position not working for FireFox

I am stuck in an issue. I have to fetch mouse positions on firefox browser. However it is not working may be I am doing any mistake in code. So far I have done is given below.
Javascript Code :
function MousePos(event){
if ($.browser.mozilla == true){
if(typeof event.offsetX === "undefined" || typeof event.offsetY === "undefined"{
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
}
}
}
HTML Code :
<div class="paymentTracker" onmouseover="MousePos();">
</div>
The function is working if I show an alert box only but this code having issue. I want mouse positions only on Firefox browser.
Thanks in advance.

try this : I think its not working because its not taking onmouseover function you have defined in html.
$( ".paymentTracker" ).mouseover(function(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
alert(coords);
});
<div class="paymentTracker"></div>
<style>
.paymentTracker {width:300px; height:300px;border:1px solid;}
</style>
heres the fiddle : https://jsfiddle.net/0yptrjdw/
with your code
$( ".paymentTracker" ).mouseover(function(event) {
var targetOffset = $(event.target).offset();
event.offsetX = event.pageX - targetOffset.left;
event.offsetY = event.pageY - targetOffset.top;
alert(event.offsetX + " " + event.offsetY);
});

Append div based on dragend mouse coordinates

I want to append div based on dragend event coordinates. This is what I have tried:
$(document).ready(function () {
var mouseX;
var mouseY;
$(document).mousemove(function (e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
var i =1;
$(".ic_table").on("dragend", function (e, ui)
{
console.log(mouseX + " " + mouseY);
var editName = "Edit Name";
$('#datamodelArea').append('<div id="divDT' + i++ + '" class="dataModelTable ui-draggable ui-draggable-handle style="left:' + mouseX + 'px' + '; top:' + mouseY + 'px' + ';"><div class="dataTableName">' + editName + '</div><div class="widget"><div class="widget-head"> <i></i> Attributes <div class="widget-body attributesBody" id="widget-body1"></div></div></div><div class="widget-body attributesBody" id="widget-body1"><ul></ul></div></div>');
$('.form-control').val('');
});
});
Html:
<body>
<div id="datamodelArea"></div>
<button class="ic_table" draggable="true">Submit</button>
</body>
Its appending only to top:0px and left:0px even though the mouse coordinates are different on dragend

Set your position properties explicitly to relative for the container and absolute for the dropped.

mouse coordinates in javascript?

I created a small function to get mouse coordinates in div but somehow it is not working. I checked my function thoroughly but I didn't find the bug.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues()
{
var s = "X:" + window.event.clientX + " Y:" + window.event.clientY ;
document.getElementById('divCoord').innerHTML = s;
}
</script>
</head>
<body onmousemove=SetValues()>
<div id="divCoord"></div>
</body>
</html>

The window.event property is only present in Internet Explorer, and only in some versions I think. In fact, the entire operation you are trying to do requires some fairly advanced cross-browser coding.
I suggest you consider using a JavaScript framework that normalizes events, such as jQuery.
Using jQuery, and this will work in all browsers:
$(document).mousemove(function(e) {
$('#divCoord').html('X:' + e.pageX + ' Y:' + e.pageY);
});

Try this code :
JS
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
HTML
X <input type="text" name="MouseX" value="0" size="4"><br>
Y <input type="text" name="MouseY" value="0" size="4"><br>
Source

window.event.clientX & window.event.clientY
try:
$(document).ready(function(e) {
$('body').live('mousemove', function(e) {
alert('x: ' + window.event.clientX + ', y: ' + window.event.clientY);
})
});

Getting the cursor position using javascript not working in firefox

I have a javascript like
function getCursorPosition(e) {
e = e || window.event;
var cursor = {x:0, y:0};
if (e.pageX || e.pageY) {
cursor.x = e.pageX;
cursor.y = e.pageY;
}
else {
cursor.x = e.clientX +
(document.documentElement.scrollLeft ||
document.body.scrollLeft) -
document.documentElement.clientLeft;
cursor.y = e.clientY +
(document.documentElement.scrollTop ||
document.body.scrollTop) -
document.documentElement.clientTop;
}
return cursor;
}
document.onmouseup = function(e){
cursor = getCursorPosition();
alert(cursor.x + ':' + cursor.y);
};
this code alerts the X and Y position where the cursor is clicked. This works good in IE 7/8, Chrome/Safari, Opera 10 . But on testing with firefox 4.0 beta 1, it is not working.
On googling, many websites gave me the same code. But it is not working in ff 4.0b
Is this a bug with ff 4.0b ? or can anyone suggest me another cross browser cursor position script ?

You should pass the event to the getCursorPosition method:
document.onmouseup = function(e){
cursor = getCursorPosition(e); //<== added the "e" argument here
alert(cursor.x + ':' + cursor.y);
};

Or lose getCursorPosition() completely and use extremely cross-browser jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function jQueryMain ()
{
$(document).mouseup (function (evt) {alert (evt.pageX + ':' + evt.pageY);} );
}
$(document).ready (jQueryMain);
</script>