Explore the community Forums Lectora Lectora Questions & Answers Javascript and Firefox: defining "e"

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #281808 Score: 0
    Profile photo of jplener
    jplener
    Member
    @jplener

    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

    #285146 Score: 0
    Profile photo of Sergey Snegirev
    Sergey Snegirev
    Member
    contributor
    intermediate
    advanced
    friend finder
    lab member
    junior moderator
    advocate
    LUC16
    LUC16 Attendee
    wise owl
    336 pts
    @ssneg

    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’).

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.