var mouseTrack = (function() {
document.onmousemove = handleMouseMove;
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 );
}
console.log(event.pageX + ', ' + event.pageY);
// document.body.innerHTML += '<div style="position:absolute;width:3px;height:3px;background:red;right:'+(window.innerWidth-event.pageX)+'px;top:'+event.pageY+'px;"></div>'
}
});
mouseTrack();
(try this in your browser :) )
If you race the mouse on high sensitivity across the page, you'll only get a coordinate set of like 10-20. If you do it slowly, you'll accumulate hundreds or thousands of points.
How often does a browser (let's say, Chrome) poll for mouse location to fire the mousemove event and even better, where is the source I can look at for this?
It is not the browser that is causing this effect. The browser does not poll the mouse position at all, actually.
It is the scripting engines implementation that takes a certain execution time for each command, thus is only able to compare positions every so many microseconds. If a change is detected an event is raised.
It is impossible to name a specific time here in my eyes, since obviously the execution time of single commands depends on the specific hardware and load of the system you test on.
Related
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 have an element I would like to show resize handles on. My current code:
const cursorMove = (e) => {
if (!curData.doAnimate) {
mouse.x = e.clientX;
mouse.y = e.clientY;
resize = {
top: mouse.y < curPos.y + settings.resizeMargin,
right: mouse.x > curPos.x + curPos.w - settings.resizeMargin,
bottom: mouse.y > curPos.y + curPos.h - settings.resizeMargin,
left: mouse.x < curPos.x + settings.resizeMargin,
};
const {top, right, bottom, left} = resize;
if (top || left || right || bottom) {
// mouse over border
if ((top && left) || (bottom && right)) {
wrap.style.cursor = 'nwse-resize';
} else if ((top && right) || (bottom && left)) {
wrap.style.cursor = 'nesw-resize';
} else if (top || bottom) {
wrap.style.cursor = 'ns-resize';
} else if (left || right) {
wrap.style.cursor = 'ew-resize';
}
} else {
wrap.style.cursor = 'default';
}
}
};
wrap.addEventListener('mousemove', cursorMove);
as you can see I use javascript to add an eventlistener for mouse movments, and every time the mouse moves I check weather it is on a border of the element. I can turn the eventlistener off if I do something with the node using curData.doAnimate. I could remove the eventlistener if I move out of the element, but I dont think this would improve the performence.
Ideal would be a solution using Css or a solution without an eventlistener permanently listening to move events.
Thank you in advance :)
Edit: I am only interested in the changed cursor - I already have a function to resize the node (unless you know a super slick way of doing so using some magic).
Luckily, CSS already has a property for handling this: resize
I have created an Array of images that load randomly when the page is refreshed and follows the cursor with an onmouseMove function. And fades out after a certain amount of time. You can find a working example here — JSFiddle
I came across another Question which supplied a JSFiddle that allowed the image to follow the cursor as well as adding some easing to it. The overall flow and experience is much more appealing, which is what I'm trying to achieve.
What I would like to know is if it were to possible to implement easing to the design I have created? I've read that there are some easing plug-ins but I feel that my situation might be a little different, but I could be wrong, I am very inexperienced when it comes to JS and jQuery.
Any feedback on how I can achieve this would be appreciated.
JS
(function() {
var pictures = ['http://www.iconsdb.com/icons/preview/white/x-mark-4-xxl.png', 'http://www.iconsdb.com/icons/preview/white/x-mark-xxl.png'];
var selectedPicture = Math.floor(Math.random() * pictures.length);
var randImg = pictures[selectedPicture];
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
var pictures = new Array ('http://www.etamcru.com/pub/img/toolbar_x_icon.png', 'http://www.schultzlawoffice.com/img/icons/blue/arrow-up-50-white.png', 'http://www.fullscope.com/SiteCollectionImages/Icons/White/Right-Arrow-Icon.png');
var selectedPicture = Math.floor(Math.random() * pictures.length);
imgFollow = document.createElement('div');
imgFollow.className = "imgFollow";
imgFollow.style.left = event.pageX + "px";
imgFollow.style.top = event.pageY + "px";
imgFollow.style.backgroundImage = 'url('+ randImg +')';
console.log(randImg);
document.body.appendChild(imgFollow);
setTimeout(function () {
imgFollow.className = "imgFollow fade-out"
}, 200);
}
})();
I have a different problem , when user clicks on page and dragging to some location, then with that co-ordinates i should draw a rectangle div...
But it working fine, when user doesn't scroll the window..
If he scroll the window. then he trying to creating a rectangle means ,then it is coming to upper positions..
how can i solve this problem.. i don't have much knowledge on javascript..
If i could not explain you in detail. feel free to ask me..
thanks
Rajesh
It sounds like you are missing the scroll position start and end point. On the mousedown event get the scroll position then on the mouseup event get the scroll position. Use the change in scroll position to help determine the size of your div.
On each event get the scroll position with a function like this:
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
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);
}