Ronnie Matthews Ronnie Matthews - 6 months ago 37
jQuery Question

Live updates of the Mouse Position in HTML/HTA Document

I would like to be able to constantly LIVE update the mouse position in a HTA window.

I know that Window.Event is only available when a DOM event is being called. so having a function that does this

VBScript:

Function vbsUpdateMousePos()

Dim X,Y, MouseX, MouseY

Set MouseX=document.getElementById ("MouseX")
Set MouseY=document.getElementById ("MouseY")

X=Window.Event.ClientX
Y=Window.Event.ClientY

MouseX.value=X
MouseY.value=y


End Function


JScript:

function jsUpdateMousePos ()
{

var MouseX=document.getElementById ("MouseX");
var MouseY=document.getElementById ("MouseY");

var x=window.event.clientX;
var y=window.event.clientY;

MouseX.value=x;
MouseY.value=y;

}


would work if I were to call any of those functions with an 'OnClick' or 'onDblClick'

<Body OnClick=jsUpdateMousePos OnDblClick=vbsUpdateMousePos>


But NOT when i try to create an interval.

VBScript:

setInterval "vbsUpdateMousePos",100


JScript:

setInterval ("jsUpdateMousePos",100);


Because of an object required "window.event" since no DOM event handler is being called.

But I would like to be able to live update the position (kinda like what you get in the MSPaint.exe program where the cursor position is displayed in the status bar.)

Is this Possible?




HERE is the FULL Demo: (NOTE for best results, save this snippet as a .HTA file.)




<html>
<head>
<title>Mucho Cursor Position Del Hogar Por Favor</title>
<HTA:APPLICATION
APPLICATIONNAME="Cursor Position"
ID="IDontKnow"
VERSION="6.9"/>
</head>

<script language="VBScript">

Function vbsUpdateMousePos()

Dim X,Y, MouseX,MouseY

Set MouseX=document.getElementById ("MouseX")
Set MouseY=document.getElementById ("MouseY")

X=Window.Event.ClientX
Y=Window.Event.ClientY

MouseX.value=X
MouseY.value=y



End Function


Sub vbsStartInterval

'Error Occurs when Trying this
setInterval "vbsUpdateMousePos",100

End Sub

</script>



<script language=JavaScript>


function jsUpdateMousePos ()
{

var MouseX=document.getElementById ("MouseX");
var MouseY=document.getElementById ("MouseY");

var x=window.event.clientX;
var y=window.event.clientY;

MouseX.value=x;
MouseY.value=y;

}



function jsStartInterval (){
//Error Occurs when trying this
setInterval ("jsUpdateMousePos",100);
}

</script>




<body onclick=jsUpdateMousePos ondblclick=vbsUpdateMousePos>
<center>
Click anywhere in this window to test JavaScript Update Cursor position<br>
Double Click anywhere in this window to test VBScript Update Cursor Position

<table>
<tr>
<td>
Mouse X:
</td>
<td>
<input id=MouseX type=text size=4>
</td>
</tr>
<tr>
<td>
Mouse Y:
</td>
<td>
<input id=MouseY type=text size=4>
</td>
</tr>
</table>


<button onclick=jsStartInterval title="start live updates of the cursor position">Start Interval (JavaScript)</button>

<button onclick=vbsStartInterval title="start live updates of the cursor position">Start Interval (VBScript)</button>
</center>
</body>

</html>

Answer

This is very possible with a simple mousemove function call. This works just fine in a .hta file.

<html>
<script>
function getCoords(e) {
    document.getElementById("xCoord").innerHTML = e.clientX;
    document.getElementById("yCoord").innerHTML = e.clientY;
}
</script>
<body onmousemove="getCoords(event)">
X:<span id="xCoord"></span> Y:<span id="yCoord"></span>
</body>
</html>