Containing your containers: Custom JavaScript Suggestions for Lectora Online

For custom JavaScript authors, it is important to not reference container elements directly. Especially with Publishing for Seamless Play, containers such as window and document can no longer be referenced directly.  Instead you need to use the global methods below to properly access these containers.
getDisplayWindow() Returns the window objects that is to be used for dealing with the js objects generated by Lectora and all window related attributes.
getDisplayDocument() Returns the document object that is to be used for dealing with the visual HTML objects, it contains all of the currently HTML elements for the page.
getCurrentPageDiv() Returns an HTML element that represents the page div.
getCurrentPageID() Returns a string with the name of the current page div.
appendElement(obj, parentElement, htmlElement) This function can be used for attaching objects to the current page div; the customer would only need to pass in the last attribute as either a HTML element or a string.
Let’s look at some examples for clarity.
Let’s say we have an HTML Extension of Type Custom Div
that looks like this
<p id="demo"></p>
And in our title we have a button with an action to run JavaScript to change our paragraph to the current date. The JavaScript looks like this
document.getElementById('demo').innerHTML = Date();
This works in non Seamless Play Publish; however, it will not work in Seamless Play Publish.
For Seamless Play Publish, you have to change the JavaScript so that it correctly finds the document:
getDisplayDocument().getElementById('demo').innerHTML = Date();
 
Here is an appendElement example. This simply adds a list item to the pageDiv:
appendElement(null,null,"<li>text<li>");
Preview image

Tags: , , , , ,

Comments

  1. Profile photo of CarlFink
    CarlFink

    Don’t suppose you could do an example of getCurrentPageID()? Two browsers (Chrome and IE) complain that this term is not defined when I try to use it.

  2. Profile photo of CarlFink
    CarlFink

    OK, the description of appendElement is simply incorrect. Passing it “an HTML element” (meaning some HTML text that defines a DIV) fails with a HierarcyRequestError. What it really expects is an object of some sort–you really define this rather poorly.

  3. Profile photo of Joe Wieloch
    Joe Wieloch

    That’s strange, when I do this in Lectora Online using Chrome there is no problem. appendElement works as stated and an LI is appended to the “wndPage” div.

    In our example the closing should be . If you tried that example then on some stricter browsers, like Firefox it might not work. I’ll get that fixed.

    1. Profile photo of CarlFink
      CarlFink

      Joe, is this stuff properly documented anywhere? For instance, in my most recent test (I’ve been traveling), appendElement(null,null,html) returns “undefined” (where html is a variable containing the code for a Div, which is valid). Is it supposed to return any value? I checked the page source, and the div code is NOT, in face, appended to anything. Can one even use a Div within a “seamless play” pagePlayer?

  4. Profile photo of CarlFink
    CarlFink

    Oh, and note that in your reply you say, “In our example the closing should be . ” That space before the period is in your reply, and apparently you pasted in some code there that got filtered out or something.

  5. Profile photo of Peter Sorenson
    Peter Sorenson

    The function call is GetCurrentPageDiv && GetCurrentPageID

    They can be viewed when you use the getDisplayWindow() function which returns all of the available functions.

    You can create your own documentation using this as I doubt it’s documented anywhere for public consumption.

Your email address will not be published. Required fields are marked *