Custom JavaScripting

When extending project with JavaScript, the container elements should not be referenced directly. With the HTML option 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.

Publishing for Seamless Play is a HTML publishing option that provides for auto-playing of media and smooth flow from page to page, eliminating the screen wipe commonly associated with HTML pages. It is set by default. For details, see Specifying HTML options.

`getDisplayWindow()`	Returns the window objects that is to be used for dealing with the js objects generated by Lectora Online 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.

If you use jQuery, you will want to make sure any selectors execute in the correct context. For example, when trying to format all input elements, reference the display window:

$('input',getDisplayWindow()).css('border','0px');

Here are some examples for clarity:

Let's say we have an HTML Extension of Type Custom Div that looks like this

And in our project 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>");