I've found this snippet on Ajaxian, but I can't seem to use the cursor.y (or cursor.x) as a variable and when the function is called as such it does not seem to work. Is there a syntax problem or something else?
function getPosition(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;
}
I'd preffer not to use jQuery UI if possible, since I've always thaught of jQuery and librarys as a bit of an overkill for most JS programing.
This has always been difficult to achieve cross-browser, but this is about as good as you can get...
<!DOCTYPE html>
<html>
<head>
<title>Javascript Test</title>
<script type="text/javascript">
window.onload = function() {
document.onmousemove = function(e) {
if(!e) e = window.event;
if(e.pageX == null && e.clientX != null) {
var doc = document.documentElement, body = document.body;
e.pageX = e.clientX
+ (doc && doc.scrollLeft || body && body.scrollLeft || 0)
- (doc.clientLeft || 0);
e.pageY = e.clientY
+ (doc && doc.scrollTop || body && body.scrollTop || 0)
- (doc.clientTop || 0);
}
document.getElementById("pos").innerHTML = e.pageX + ", " + e.pageY;
}
}
</script>
</head>
<body>
<h1>Position: <span id="pos">0, 0</span></h1>
</body>
</html>
This snippet must be called inside a mouse event handler, with the event object from the handler.
//edit//Just in case I misunderstood you can not set the mouse's physical position in javascript.
So I found an answer kind of on here so I shall Simply Link to it for study purposes. Show mouse x and y position with javascript
Edited----Wanted to share what worked for me.
This is a form of the code I found at above link I changed slightly. It seems as though I must put certain things to window.onload.
window.onload = function () {
IE = (navigator.appName == "Microsoft Internet Explorer") ? true : false;
if (!IE) {
document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousemove = function (e) {mousePos(e);};
document.onmousedown = function (e) {mouseClicked();};
};
var mouseClick;
var keyClicked;
var mouseX = 0;
var mouseY = 0;
function mousePos (e) {
if (!IE) {
mouseX = e.pageX;
mouseY = e.pageY;
}else{
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return true;
}
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 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);
}
})();
Using Javascript, I would like to reposition an object using a event drag.
Is tracking the distance the mouse moved the only way of getting the location of the object before drop?
In this example, there is not "drop location" as I will simply be updating the object's location based on where the user drags the mouse.
Thanks!
Cross Browser compatibility is an issue so the code is kind of funky. This code should work on any Browser.
This is based on the mouseup event.You could use the mousemove event instead.
If the event listener is added to the window, it will not work in IE8 and prior.
<!DOCTYPE html><html lang="en"><head><title>Floor Plan</title>
<style type="text/css">
#page{width:100%;padding:0;}
</style>
<body><div id="page" onmouseup="fpos(event)">
</div></body></html>
EOT;
ob_flush();
echo <<<EOT
<script type="text/javascript">//<![CDATA[
var fp = document.getElementById('fp');
var ptr = document.getElementById('point');
function fpos(e) {
var x = 0;
var y = 0;
e = e || window.event;
if (e.pageX || e.pageY){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY) {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
var offSet = findPos(fp);
x -= offSet[0];
y -= offSet[1];
find(x,y);
}
function findPos(obj) {
var currentLeft = currentTop = 0;
if (obj.offsetParent) {
do {
currentLeft += obj.offsetLeft;
currentTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [currentLeft,currentTop];
}}
I made a code that make a div follow the mouse on the window navigator, here is the code:
<script type='text/javascript'>
window.onload = function()
{
window.onmousemove = function(event)
{
var evento = event || window.event;
var bloque = document.getElementById('x');
bloque.style.top = evento.clientY+'px';
bloque.style.left = evento.clientX+'px';
}
}
</script>
BLOQUE
It works on firefox but it does not on IE. It simply does not do anything. What I am doing wrong?
var isMSIE = /*#cc_on!#*/0;
if (isMSIE) {
// do IE-specific things
bloque.style.top = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop+"px";
bloque.style.left = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft+"px";
} else {
// do non IE-specific things
bloque.style.top = event.clientY + window.scrollY+"px";
bloque.style.left = event.clientX + window.scrollX+"px";
}
I am developing a web page where I have set an image in a <div> dynamically.
It works in Firefox but it fails in IE.
The question is: how to get mouse pointer position in IE?
I am using the following code for getting mouse pointer position:
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
It works fine with Firefox.
Try this, This should work on all browsers including IE.
<html>
<body>
<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>
<script language="JavaScript1.2">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
// Main function to retrieve mouse x-y pos.s
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
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.MouseX.value = tempX
document.Show.MouseY.value = tempY
return true
}
//-->
</script>
</body>
</html>
Use jQuery and use event.pageX and event.pageY!
See http://api.jquery.com/event.pageY/
I solved this problem with this code
var CurX;
var CurY;
var IE = document.all?true:false;
if(IE){
CurX = window.event.clientX;
CurY = window.event.clientY;
}
else{
if (window.captureEvents) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getCursorXY;
}
function getCursorXY(e) {
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
Use: clientX and clientY
Like this code:
var posx = 0;
var posy = 0;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}