Javascript and Firefox: defining "e"
March 19, 2013 12:00 AM
Hello,
we use Lectora for some time now. As the projects getting more complex we like to integrate javascript into Lectora.
In my current project, I want to identify the position of the cursor. I put the following script into an External HTML-object (type: Header Scripting)
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 {
var de = document.documentElement;
var b = document.body;
cursor.x = e.clientX +
(de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
cursor.y = e.clientY +
(de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
return cursor.x;
}[/CODE]
For starters I return cursor.x (instead of cursor) to make it easier to track the variable - I can simply write it into a text field, instead of resolving the array {x:0, y:0} first...
I call the function by a click on an image, setting a custom variable (myCursorPos) to the return value of the function:
On Click -> Modify Variable -> target: myCursorPos -> value: javascript:getPosition()
This is working well in IE, Safari, and partially Chrome (Chrome needs some kind of double-click to return anything else than 0 ???).
However it does not work in Firefox at all: Debugger says that 'e' is undefined. I tried to pass different arguments when calling the function, like this:javascript:getPosition(window.element). But no luck so far...
Any suggestions? Thanks in advance for your help!
Joachim[CODE]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 {
var de = document.documentElement;
var b = document.body;
cursor.x = e.clientX +
(de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
cursor.y = e.clientY +
(de.scrollTop || b.scrollTop) - (de.clientTop || 0);
}
return cursor.x;
}[/CODE]
For starters I return cursor.x (instead of cursor) to make it easier to track the variable - I can simply write it into a text field, instead of resolving the array {x:0, y:0} first...
I call the function by a click on an image, setting a custom variable (myCursorPos) to the return value of the function:
On Click -> Modify Variable -> target: myCursorPos -> value: javascript:getPosition()
This is working well in IE, Safari, and partially Chrome (Chrome needs some kind of double-click to return anything else than 0 ???).
However it does not work in Firefox at all: Debugger says that 'e' is undefined. I tried to pass different arguments when calling the function, like this:javascript:getPosition(window.element). But no luck so far...
Any suggestions? Thanks in advance for your help!
Joachim
Discussion (1)
First of all, make sure you publish your course and put it online (localhost is okay, file:/// is not okay), otherwise browser security will interfere with your JS (hence Chrome weirdness and probably FF stuff, too). Local preview is really, really NOT the same as publishing a course and putting it online.
Second, you're approaching this from a wrong angle. If you're trying to build a hotspot exercise, you can:
a) put a huge transparent button on top of your image to make sure there's a pointer (hand) cursor all over it, then add more transparent buttons in different places, doing what you want - populating variables, launching actions, etc. No JS required at all.
b) go JS way. Then you should do it properly: add a mouseclick listener to the image (or container div). Then add all logic to the handler, like launching whatever actions you need, e.g. trivNextPage() or VarMyvariable.set('wrong').
Discussions have been disabled for this post