I'm very new to Javascript/HTML and I'm trying to create a manual tracking device for soccer/football games. (By using others examples) I've gotten as far as been able to create a program to track/dot my mouse movements across my screen and record the positional coordinates in the console, yet I'm struggling on 2 issues.
Is there a way to change the colour on my tracker by using keyboard shortcuts to indicate a possession change?
If so, is it also possible to correspond the colour of my tracker/dot the the coordinates in the console for later analysis?
Here's my code so far. Please feel free to rip it apart and edit it however you see fit.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {
height: 1000px;
}
.dot {
width: 2px;
height: 2px;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<script>
(function() {
"use strict";
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) ||
document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
console.log("mouse location:", pos);
if (!pos) {
// We haven't seen any movement yet, so don't add a duplicate dot
}
else {
// Use pos.x and pos.y
// Add a dot to follow the cursor
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
}
})();
</script>
</body>
<img src="Soccer_Template.png"></img>
</html>
I'm not sure i understand you're question but i'm going to try an answer.
1 - you can change the color of you're tracker using element.style.background
var dot = document.createElement('div');
dot.style.background = "red"; // Or any color, rgb, HEX you want
2 - It's possible to change the color of you're tracker dynamically to correspond of the coordinates. Just add something like
if(pos.x > 1 && pos.y > 1){
dot.style.background = "red";
}
else{
dot.style.background = "blue";
}
Hope it's helps
I can dynamically position a div element, so that as the user moves the mouse the element follows, using jQuery:
inputFile.offset({
top: ev.pageY - 15,
left: ev.pageX - 160
});
I would prefer to not use jQuery. How would I accomplish the same using vanilla JavaScript?
Define div to use then create a function for the X and Y coordinates and one for the cursor then have div follow cursor.
var div = 'mydiv'; // div that will follow the mouse. Set position:absolute in CSS
var offset_X = 10; // X offset from mouse position
var offset_Y = 10; // Y offset from mouse position
function mouseX(evt) { // create function for x mouse event
if (!evt) evt = window.event;
if (evt.pageX) return evt.pageX;
else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
else return 0;
}
function mouseY(evt) { // create function for Y mouse event
if (!evt) evt = window.event;
if (evt.pageY) return evt.pageY;
else if (evt.clientY) return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
else return 0;
}
function follow(cursor) { // create function for cursor
var obj = document.getElementById(div).style;
obj.left = (parseInt(mouseX(cursor)) + offset_X) + 'px';
obj.top = (parseInt(mouseY(cursor)) + offset_Y) + 'px';
}
document.onmousemove = follow; // call function when user moves mouse
#mydiv {
position: absolute;
display: block;
background: #ccc;
height: 100px;
padding: 20px 50px;
}
<div id="mydiv"> </div>
I am trying to create a image that follows the cursor and 'prints'/draws itself and fades each individual image that has been 'printed'/drawn after x amount of seconds.
So far I have managed to get the image to follow the cursor, just unsure of how to create a function or a way that would make each individual image fade away after a certain amount of time?
I have created a JS Fiddle to help with my explanation.
JS
(function() {
"use strict";
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var imgFollow, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y
// are, calculate pageX/Y - logic taken from jQuery
// Calculate pageX/Y if missing and clientX/Y available
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Add an image to follow the cursor
imgFollow = document.createElement('div');
imgFollow.className = "imgFollow";
imgFollow.style.left = event.pageX + "px";
imgFollow.style.top = event.pageY + "px";
document.body.appendChild(imgFollow);
}
})();
CSS
.wrapper {
height: 100vh;
width:100%;
background-color:green;
overflow:hidden;
position:relative;
}
.imgFollow {
width: 32px;
height: 32px;
position: absolute;
opacity:0.3;
background-repeat:none;
background-image:url('http://static.wfu.edu/images/icon-help-32x32.png');
transform: translate(-50%, -50%);
}
Add them.
JS
setTimeout(function () {
imgFollow.className = "imgFollow fade-out"
},1000);
CSS
.fade-out{
transition: opacity 1s;
opacity: 0 !important;
}
Here is a way of achieving what you want using jquery.
$(document).ready(function() {
var init = true;
$(document).on('click', function() {
$(this)[init?'on':'off']('mousemove', follow);
init = !init;
}).trigger('click');
function follow(e) {
var xPos = e.pageX;
var yPos = e.pageY;
$("#imgFollow").addClass("imgFollow"); //adds the css class to a div with id "imgFollow"
$("#imgFollow").offset({
left: e.pageX,
top: e.pageY
});
}
});
So include in the document the jquery librar and add a div with your named id.
Hope this helps.
I am hoping to track the position of the mouse cursor, periodically every t mseconds. So essentially, when a page loads - this tracker should start and for (say) every 100 ms, I should get the new value of posX and posY and print it out in the form.
I tried the following code - but the values do not get refreshed - only the initial values of posX and posY show up in the form boxes. Any ideas on how I can get this up and running ?
<html>
<head>
<title> Track Mouse </title>
<script type="text/javascript">
function mouse_position()
{
var e = window.event;
var posX = e.clientX;
var posY = e.clientY;
document.Form1.posx.value = posX;
document.Form1.posy.value = posY;
var t = setTimeout(mouse_position,100);
}
</script>
</head>
<body onload="mouse_position()">
<form name="Form1">
POSX: <input type="text" name="posx"><br>
POSY: <input type="text" name="posy"><br>
</form>
</body>
</html>
The mouse's position is reported on the event object received by a handler for the mousemove event, which you can attach to the window (the event bubbles):
(function() {
document.onmousemove = handleMouseMove;
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
// Use event.pageX / event.pageY here
}
})();
(Note that the body of that if will only run on old IE.)
Example of the above in action - it draws dots as you drag your mouse over the page. (Tested on IE8, IE11, Firefox 30, Chrome 38.)
If you really need a timer-based solution, you combine this with some state variables:
(function() {
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var dot, eventDoc, doc, body, pageX, pageY;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet
}
else {
// Use pos.x and pos.y
}
}
})();
As far as I'm aware, you can't get the mouse position without having seen an event, something which this answer to another Stack Overflow question seems to confirm.
Side note: If you're going to do something every 100ms (10 times/second), try to keep the actual processing you do in that function very, very limited. That's a lot of work for the browser, particularly older Microsoft ones. Yes, on modern computers it doesn't seem like much, but there is a lot going on in browsers... So for example, you might keep track of the last position you processed and bail from the handler immediately if the position hasn't changed.
onmousemove = function(e){console.log("mouse location:", e.clientX, e.clientY)}
Open your console (Ctrl+Shift+J), copy-paste the code above and move your mouse on browser window.
Here's a solution, based on jQuery and a mouse event listener (which is far better than a regular polling) on the body:
$("body").mousemove(function(e) {
document.Form1.posx.value = e.pageX;
document.Form1.posy.value = e.pageY;
})
What I think that he only wants to know the X/Y positions of cursor than why answer is that complicated.
// Getting 'Info' div in js hands
var info = document.getElementById('info');
// Creating function that will tell the position of cursor
// PageX and PageY will getting position values and show them in P
function tellPos(p){
info.innerHTML = 'Position X : ' + p.pageX + '<br />Position Y : ' + p.pageY;
}
addEventListener('mousemove', tellPos, false);
* {
padding: 0:
margin: 0;
/*transition: 0.2s all ease;*/
}
#info {
position: absolute;
top: 10px;
right: 10px;
background-color: black;
color: white;
padding: 25px 50px;
}
<!DOCTYPE html>
<html>
<body>
<div id='info'></div>
</body>
</html>
I believe that we are overthinking this,
function mouse_position(e)
{
//do stuff
}
<body onmousemove="mouse_position(event)"></body>
ES6 based code:
let handleMousemove = (event) => {
console.log(`mouse position: ${event.x}:${event.y}`);
};
document.addEventListener('mousemove', handleMousemove);
If you need throttling for mousemoving, use this:
let handleMousemove = (event) => {
console.warn(`${event.x}:${event.y}\n`);
};
let throttle = (func, delay) => {
let prev = Date.now() - delay;
return (...args) => {
let current = Date.now();
if (current - prev >= delay) {
prev = current;
func.apply(null, args);
}
}
};
// let's handle mousemoving every 500ms only
document.addEventListener('mousemove', throttle(handleMousemove, 500));
here is example
Just a simplified version of #T.J. Crowder and #RegarBoy's answers.
Less is more in my opinion.
Check out onmousemove event for more info about the event.
There's a new value of posX and posY every time the mouse moves according to the horizontal and vertical coordinates.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example Mouse Tracker</title>
<style>
body {height: 3000px;}
.dot {width: 2px;height: 2px;background-color: black;position: absolute;}
</style>
</head>
<body>
<p>Mouse tracker</p>
<script>
onmousemove = function(e){
//Logging purposes
console.log("mouse location:", e.clientX, e.clientY);
//meat and potatoes of the snippet
var pos = e;
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
</script>
</body>
</html>
if anyone still looking for answer then,
function track(e) {
console.log("X - ", e.pageX, " Y - ", e.pageY);
}
addEventListener("mousemove", track, false);
paste this code in console to see immediate action
If just want to track the mouse movement visually:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
</style>
<body>
<canvas></canvas>
<script type="text/javascript">
var
canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
beginPath = false;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.addEventListener('mousemove', function (event) {
var x = event.clientX, y = event.clientY;
if (beginPath) {
ctx.lineTo(x, y);
ctx.stroke();
} else {
ctx.beginPath();
ctx.moveTo(x, y);
beginPath = true;
}
}, false);
</script>
</body>
</html>
document.addEventListener('mousemove', (event) => {
document.getElementById("line").style.top = event.clientY - 10 + 'px';
document.getElementById("lineY").style.left = event.clientX - 10 + 'px';
document.getElementById("pos").style.top = (event.clientY - 60) + 'px';
document.getElementById("pos").style.left = (event.clientX - 60) + 'px';
});
body {
position: relative;
height: auto;
min-height: 100% !important;
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.abs {
position: relative;
}
.lineY {
display: flex;
position: relative;
left: 0px;
background-color: black;
width: 2px;
height: 100vh;
min-height: 100%
}
.line {
display: flex;
position: relative;
background-color: black;
min-height: 2px;
width: 100%;
}
.circle {
display: flex;
position: absolute;
left: 0px;
top: 0px;
}
<div class='line' id="line"></div>
<div class='lineY' id="lineY"></div>
<svg height="100" width="100" id="pos" class="circle">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="transparent" />
</svg>
Irrespective of the browser, below lines worked for me to fetch correct mouse position.
event.clientX - event.currentTarget.getBoundingClientRect().left
event.clientY - event.currentTarget.getBoundingClientRect().top
I don't have enough reputation to post a comment reply, but took TJ Crowder's excellent answer and fully defined the code on a 100ms timer. (He left some details to the imagination.)
Thanks OP for the question, and TJ for the answer! You're both a great help. Code is embedded below as a mirror of isbin.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style>
body {
height: 3000px;
}
.dot {
width: 2px;
height: 2px;
background-color: black;
position: absolute;
}
</style>
</head>
<body>
<script>
(function() {
"use strict";
var mousePos;
document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // setInterval repeats every X ms
function handleMouseMove(event) {
var eventDoc, doc, body;
event = event || window.event; // IE-ism
// If pageX/Y aren't available and clientX/Y are,
// calculate pageX/Y - logic taken from jQuery.
// (This is to support old IE)
if (event.pageX == null && event.clientX != null) {
eventDoc = (event.target && event.target.ownerDocument) || document;
doc = eventDoc.documentElement;
body = eventDoc.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0 );
}
mousePos = {
x: event.pageX,
y: event.pageY
};
}
function getMousePosition() {
var pos = mousePos;
if (!pos) {
// We haven't seen any movement yet, so don't add a duplicate dot
}
else {
// Use pos.x and pos.y
// Add a dot to follow the cursor
var dot;
dot = document.createElement('div');
dot.className = "dot";
dot.style.left = pos.x + "px";
dot.style.top = pos.y + "px";
document.body.appendChild(dot);
}
}
})();
</script>
</body>
</html>
Here is a solution
document.onmousemove = showCoords;
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("box1").innerHTML = coords;
}
[...document.querySelectorAll("*")].forEach(h => h.addEventListener("mousemove", function(event) {
console.table({
"mouse x": event.clientX,
"mouse y": event.clientY
});
}));
Here is the simplest way to track your mouse position
Html
<body id="mouse-position" ></body>
js
document.querySelector('#mouse-position').addEventListener('mousemove', (e) => {
console.log("mouse move X: ", e.clientX);
console.log("mouse move X: ", e.screenX);
}, );
know more
This is the shortest way to get the coordinates of mouse pointer.
Just put your element where cursor is going to hover, inside $("")
$("***enter you element here***").mousemove(function(event)
{
console.clear()
var x = event.originalEvent.screenX;
var y = event.originalEvent.screenY;
console.log("x : "+x)
console.log("y : "+y)
})
Here’s a combination of the two requirements: track the mouse position, every 100 milliseconds:
var period = 100,
tracking;
window.addEventListener("mousemove", function(e) {
if (!tracking) {
return;
}
console.log("mouse location:", e.clientX, e.clientY)
schedule();
});
schedule();
function schedule() {
tracking = false;
setTimeout(function() {
tracking = true;
}, period);
}
This tracks & acts on the mouse position, but only every period milliseconds.
We recently had to find the current x,y position to enumerate elements over which the cursor is hovering independent of z-index. We ended up just attaching a mousemove event listener to document e.g.,
function findElements(e) {
var els = document.elementsFromPoint(e.clientX, e.clientY);
// do cool stuff with els
console.log(els);
return;
}
document.addEventListener("mousemove", findElements);
I need to set the top and left px numbers for a div based on this data. How might one go about doing this?
So basically when a user clicks on this element. I have a showcontent function which shows/hides content. But I need to set the top by finding the position of cursor
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
This example is based on the jQuery javascript library.
$("#button").click(function(e){
alert("X is: "+e.pageX+" \n Y is:"+e.pageY);
});
Online demo here: http://jsfiddle.net/pGdbD/1/
Try clicking in different parts of the button
If you don't use jquery or another lib, you need to look at this page http://www.quirksmode.org/js/events_properties.html to handle it cross browser. It involves the following properties: Event.clientX or Event.pageX
Otherwise jquery's event has a pageX and pageY properties.
Most libraries have something to do this for you.
Ext-Core: Event.getPageX() http://dev.sencha.com/deploy/dev/docs/source/EventManager.html#method-Ext.EventObject-getPageX
jquery: http://api.jquery.com/event.pageX/
You can use the event.pageX and event.pageY properties of the Event object to find out where the mouse was when the event took place. For example:
document.getElementById('yourDiv').addEventListener('click', function(event) {
console.log('X: ' + event.pageX + ' Y: ' + event.pageY);
});
Obviously your actual code would be more complex, using attachEvent for IE, for instance, but this should show you how it's done.
Edit As Juan quite rightly reminds me, pageX/Y are not set in Internet Explorer. The following is adapted from the jQuery source code, and works round this problem:
function(event) {
var x, y;
if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement,
body = document.body;
x = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
y = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
} else {
x = event.pageX;
y = event.pageY;
}
console.log('X: ' + x + ' Y: ' + y);
}