Publish to Seamless Play Kills Custom Animations

_
_ Community Member Posts: 84
Hi All,

I've just upgraded to L17 and am having some trouble with the Seamless Play publishing options.

I've got some buttons animated with the DynamicsJS Animation Library to give them a nice touch of motion. They work perfectly fine until I enable publish to Seamless Play:

- When previewed in Lectora or browser: works OK
- When published with Seamless Play disabled: works OK
- When published with Seamless Play enabled: doesn't animate

See attached screenshot - when published normally the button animates and the rest of the actions are fired in sequence as normal. When published to Seamless Play however, the debug window show it's firing that first animate action and then getting stuck.

The code on the button looks like this:
dynamics.animate(document.querySelector('.beginTopicButton'), {
translateY: 100
}, {
type: dynamics.spring,
})

Does anyone know if Seamless Play adds CSS or Javascript that would interfere with this script? Might be a question for Trivantis Support instead...

Thanks in advance!

Comments

  • karen-jensen
    karen-jensen Community Member Posts: 35
    Do you have any delays on the actions below the seamless one?
  • klaatu
    klaatu Community Member Posts: 988
    Can you create and post a simple one button page as an example?  Seamless play is using iframes so my first guess is that you'll have to target elements differently. Thankfully Trivantis left us an option to leave the buggy seamless play off.
  • kbrill2052
    kbrill2052 Community Member Posts: 9
    I've seen other examples of scripts no longer working with seamless play.  I've been using header scripting to automatically size the content to the browser window and this no longer works in internet explorer with seamless play turned on.
  • _
    _ Community Member Posts: 84
    Hi again folks and thanks for taking a look!

    Please find attached a one-page example showing the issue - I've included two HTML published versions with Seamless Play enabled/disabled (and Debug turned on!).

    The intended flow of events is:

    1. Click Begin button, Javascript animation is fired, Begin button moves off screen
    2. After 2 second delay, fire Javascript animation on Continue button, Continue button moves onto screen

    @Karen: I do have delays set on the subsequent actions, but zeroing these out didn't seem to help - it continued to get stuck after triggering the first action.

    @Darrel: I reckon you're right, sounds like the new frame setup has broken my element targeting, but my knowledge of Javascript is limited at best!!
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    All your code essentially runs in an extra iframe now, so any "window" or "document" reference must become "parent.window" and "parent.document" now.
  • _
    _ Community Member Posts: 84
    Thanks Sergey - getting somewhere now!

    By changing:

    dynamics.animate(document.querySelector(&#039;.beginTopicButton&#039;), { <code> }

    To:

    dynamics.animate(parent.document.querySelector(&#039;.beginTopicButton&#039;), { <code> }

    I now have the animated elements moving correctly to their final coordinates.

    However the keyframes of the actual animation don't work - each object just snaps instantly to its end position. I figure I'll have to make adjustments to the animation library script to get the remainder of the functionality talking across the iframe.

    Thanks!!
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Here's the information I got from the dev team :) Hope this helps!

    All scripting technically works but if they add their own HTML elements through scripting they should use the function that we have provided which will work in Seamless publishing and non-Seamless cases.  The functions are:
      • 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.
  • klaatu
    klaatu Community Member Posts: 988
    Did Lectora pull the equivalent of a software jump the shark?
  • approg
    approg Community Member Posts: 250 ♪ Opening Act ♪
    What part do you consider to be jumping?

    It makes a lot of sense to have functions that return the various windows/IDs because the way seamless is running today (using iframes and referencing parent.widow) could change in the next release. So any of your code that is using parent.window would break whereas getDisplayWindow would still return the correct window.
  • kraven7771
    kraven7771 Community Member Posts: 50
    Hey Jennifer,

    Is there any explains or tutorials on using these code items for when we're doing seamless publishing with custom divs?
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    Let me ask around.  I don't think I've seen anything floating around on the website or Community.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Struggling with Seamless at the moment too. Using Sergey's tip...adding parent where needed... makes my scripts and animations work properly in Chrome.

    But when i run the same course in IE11, it doesnt run my scripts and animations.

    When i doublecheck and run one of the codes Jennifer shared... GetCurrentPageID() to be precise...
    On Chrome i get as expected 'pageDIV'
    On IE11 i get unexpected 'page2' ( Same for Edge actually )

    Anyone that has tips or a setup to share that will run on Seamless and Not-seamless, with external javascripts and being able to access/change pageelements...would be much obliged..
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Why o why, i have so often the answers to my own questions the minute i post them here ;-)

    In my Javascript i had this:
    pageDIV = parent.document.getElementById("pageDIV");

    this resulted in Edge and IE issues with Seamless, working nicely in Chrome.

    Changing it to this, and it works in all browsers and both in Seamless and not Seamy:
    pageDIV = parent.document.getElementById(GetCurrentPageID());

    ~Math
  • rwalters
    rwalters Community Member Posts: 276
    I wish they could have at least not made Seamless Play checked by default. Nothing works right for me when I publish with it checked.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    Can you share a sample of your file rwalters ? ( or a cleaned up similar one ) then i will see if i get it working.

    Math
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!