Menu
I have two problems with the following code. The program works fine, except:
1. I want to be able to monitor the position of the mouse for a period of time (10 seconds).
Currently the program works, but only displays changes to the mouse position
when the mouse has been moved. I want to save the mouse position at all
times after the ‘start’ button has been pressed.
My goal: I would like to monitor the X,Y position at one second intervals,
even when the mouse is not moved.
I assume I will need to look at the system clock and force an event to occur
whenever one second has passed. Anyone know of the function to call to
get this to happen?
2. When I un-comment the <form>…</form> tags in the code,
the script no longer works as without them!
Anyone have an idea why this is happening?
I will need the program to work with the <form> tags in so that I can send
the acquired information to a server file. The ‘Clear’ button performs the
functions of the ‘Reset’ until I can get the script to work as desired.
Any help is appreciated.
[code=php]
<html>
<head>
<title>Follow Mouse</title>
<style type=”text/css”>
#mydiv {
position:absolute;
overflow:hidden;
visibility: hidden;
z-index:999;
width:40px; height:20px;
background-color:#ffffcc;
}
</style>
<script type=”text/javascript”>
<!–
var XYClock = 0;
var StartXYClock = 0;
function SaveXYpos() {
// save X,Y mouse position once per second
document.getElementById(‘PosList’).value
+= document.getElementById(‘Xpos’).value + ‘,’ + document.getElementById(‘Ypos’).value + “n”;
}
function StartCollection() {
// start using system clock to check mouse position
XYClock = 1;
var dtime = new Date(); var dsec = dtime.getTime();
StartXYClock = dsec;
// document.onmousemove = follow; // doesn’t work as expected
}
function StopCollection() {
// stop using system clock to check mouse position
XYClock = 0;
// document.onmousemove = void(); // doesn’t work as expected
}
// Simple follow the mouse script
var divName = ‘mydiv’; // div that is to follow the mouse
// (must be position:absolute)
var offX = 15; // X offset from mouse position
var offY = 15; // Y offset from mouse position
function mouseX(evt) {
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) {
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(evt) {
if (document.getElementById) {
var obj = document.getElementById(divName).style;
obj.visibility = ‘visible’;
obj.left = (parseInt(mouseX(evt))+offX) + ‘px’;
obj.top = (parseInt(mouseY(evt))+offY) + ‘px’;
document.getElementById(‘Xpos’).value = mouseX(evt);
document.getElementById(‘Ypos’).value = mouseY(evt);
if (XYClock == 0) { return }
var dtime = new Date(); var dsec = dtime.getTime();
if (dsec > (XYClock+1000)) { SaveXYpos(); XYClock = dsec; }
if (dsec > (StartXYClock+(1000*10))) { XYClock = 0; }
}
}
function ClearAll() {
document.getElementById(‘Xpos’).value = 0;
document.getElementById(‘Ypos’).value = 0;
document.getElementById(‘PosList’).value = ”;
XYClock = 0; StartXYClock = 0;
}
document.onmousemove = follow;
//–>
</script>
</head>
<body>
<!– form id=”spotform” –>
<button id=”btnStart” onClick=”StartCollection()”>Start</button>
<button id=”btnStop” onClick=”StopCollection()”>Stop</button>
<br />
<div> Xpos: <input id=”Xpos” type=”text” value=0 size=1>
Ypos: <input id=”Ypos” type=”text” value=0 size=1>
<br /><textarea id=”PosList” cols=”10″ rows=”20″</textarea>
<div id=”mydiv”>X,Y</div>
<br />
<input type=”submit” value=”Submit” />
<input type=”reset” value=”Reset” />
<button onClick=”ClearAll()”>Clear</button> <!– use this until ‘form’ works –>
<!– /form –>
</body>
</html>
One last question, once I get the <form> tags to work:
Can I force a submit to occur when the operator presses the ‘Reset’ button
OR
if the operator does a reload of the page (using Ctrl-F5)?