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);
})
});
Related
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);
});
This question already has answers here:
Javascript - Track mouse position
(18 answers)
Closed 7 years ago.
I'm writing a script that will repeatedly write my mouse coordinates to an element as I navigate with it. But I'm not sure how to detect information from the mouse. Some one wanna point me in the right direction?
document.getElementById("coords").innerHTML = crdX + ", " + crdY
http://jsfiddle.net/7pj9gpvn/
EDIT: My question is not a duplicate of the proposed question because the proposed question is concerned with the loop aspect of the same problem, whereas mine is concerned with the 'event handling' aspect. I did read and attempt to ascertain the information I needed from that question, but as I am a beginner, I found their code difficult to read.
Try This works on all browser
http://jsfiddle.net/7hxtLqd4/
<html>
<body>
<form name="mShow">
<input type="text" name="MX" value="0" size="4"> X
<br>
<input type="text" name="MY" value="0" size="4"> Y
<br>
</form>
<script language="JavaScript1.2">
var IE = document.all ? true : false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouse;
var tempX = 0
var tempY = 0
function getMouse(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0) {
tempX = 0
}
if (tempY < 0) {
tempY = 0
}
// ADD TEMP VALUE FOR FIELDS
document.mShow.MX.value = tempX
document.mShow.MY.value = tempY
return true
}
</script>
</body>
</html>
You need to attach a MouseEvent and the event object passed to the handler will give you the coordinates. Attach it to the document if you want to track the movement everywhere. clientX and clientY properties give you local coordinates while screenX and screenY give you global coordinates.
Fiddle: http://jsfiddle.net/AtheistP3ace/7pj9gpvn/4/
HTML:
<p id="coords"></p>
<p id="coords2"></p>
JS:
document.addEventListener('mousemove',
function (event) {
var para = document.getElementById('coords');
para.textContent = event.clientX + ", " + event.clientY;
var para2 = document.getElementById('coords2');
para2.textContent = event.screenX + ", " + event.screenY;
}
);
Feel free to read up on it yourself too: https://developer.mozilla.org/en-US/docs/Web/Events/mousemove
I am learning the html drag-and-drop methods. However, something is wrong when i want to make a div draggable, and change its position when i "drop" it.
I get the position of the cursor using e.screenX and e.screenY when I drag and drop it. However, I think that when I "drop" it, the coordinates changes comparing to the last coordinates when I was "dragging" it.
It works fine on Chrome and IE on PC running Windows 7; but the situation happens on both Safari and Chrome on my Mac, IE and Chrome on virtual machine running Windows 8.1. I am totally confused.
Thanks in advance. Here is my code.
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="drag-1" class="drag module" draggable="true">
<div class="module-header">Draggable Div</div>
<div class="module-content">
<p>This is draggable.</p>
</div>
</div>
<script>
var draggable_div = document.getElementById("drag-1");
var startPos = {};
draggable_div.ondragstart = function(e){
// e.dataTransfer.setData("_", "");
console.log("start: " + e.offsetX + ", " + e.offsetY);
startPos = {
left: draggable_div.offsetLeft,
top: draggable_div.offsetTop,
offsetX: e.offsetX,
offsetY: e.offsetY
}
console.log( startPos );
}
draggable_div.ondrag = function(e){
// console.log("drag.. " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = startPos.top + e.offsetY - startPos.offsetY + "px";
draggable_div.style.left = startPos.left + e.offsetX - startPos.offsetX + "px";
//
}
draggable_div.ondragend = function(e){
// console.log("drop: " + e.offsetX + ", " + e.offsetY);
draggable_div.style.top = parseInt(startPos.top + e.offsetY - startPos.offsetY) + "px";
draggable_div.style.left = parseInt(startPos.left + e.offsetX - startPos.offsetX) + "px";
// console.log( startPos );
}
</script>
</body>
</html>
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>
Just wondering if its possible to get the x/y location of the mouse from the onload event of the document (before any mousemove events)?
short answer: no
long answer: yes. the onload event doesn't provide info on the mouse position, however you can set a variable when onload has fired, and use the onmousemove event on the document to get the mouseposition as soon as the mouse moves after the documents loads (after the variable has been set). Not what you wanted, though.
You can try something like:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues() {
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
getMouseXY();
var mX = 0;
var mY = 0;
function getMouseXY(e) {
if (IE) {
mX = event.clientX + document.body.scrollLeft;
mY = event.clientY + document.body.scrollTop;
}
else {
mX = e.pageX;
mY = e.pageY;
}
var s = 'X=' + mX + ' Y=' + mY ;
document.getElementById('divCoord').innerHTML = s;
return true;
}
}
</script></head>
<body onload=SetValues()>
<div id="divCoord"></div>
</body></html>