Since MousePosition[] returns $Failed in WolframCloud I was wondering if I could use CloudSystem`JavaScriptExecute to emulate MousePosition[].
But how does JavaScriptExecute actually work?
Suppose I want to first add a javascript function, like
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);
}
and then execute it.
How to do it?
Or did I overlook any documentation of JavaScriptExecute?
Lets give this a try. Here is some javascript code in a html page. It picks up the mouse position when the header is clicked.
<!DOCTYPE html>
<html>
<body>
<h2 onclick="showCoords(event)">Click this heading to get the x (horizontal) and y (vertical)
coordinates of the mouse pointer when it was clicked.</h2>
<p><strong>Tip:</strong> Try to click different places in the heading.</p>
<p id="demo"></p>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
</script>
</body>
</html>
save this code in a text file: I named it page4.html
now deploy it:
note: I save the html/javascript code to a file and then use Import with “Source”. The quotes in the html are then auto escaped. If i do this manually I always make one or more mistakes (with the /")
It is a good idea to import HTML from a file, but this also would work as a string:
HTMLcode = "
<!DOCTYPE html>
<html>
<body>
<h2 onclick=\"showCoords(event)\">Click this heading to get the x \
(horizontal) and y (vertical)
coordinates of the mouse pointer when it was clicked.</h2>
<p><strong>Tip:</strong> Try to click different places in the \
heading.</p>
<p id=\"demo\"></p>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = \"X coords: \" + x + \", Y coords: \" + y;
document.getElementById(\"demo\").innerHTML = coords;
}
</script>
</body>
</html>
";
