Explore the community Forums Lectora Lectora Questions & Answers Publish to Seamless Play Kills Custom Animations

Tagged: 

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #344367 Score: 0
    Profile photo of Cam Phillips
    Cam Phillips
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    4 pts
    @_

    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!

    Attachments:
    #344451 Score: 0
    Profile photo of Karen Jensen
    Karen Jensen
    Member
    beginner
    intermediate
    curious george
    wise owl
    friend finder
    contributor
    3 pts
    @Karen Jensen

    Do you have any delays on the actions below the seamless one?

    #344464 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    169 pts
    @Klaatu

    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.

    #344547 Score: 0
    Profile photo of Kevin Brill
    Kevin Brill
    Member
    beginner
    intermediate
    wise owl
    curious george
    contributor
    @kbrill2052

    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.

    #344684 Score: 0
    Profile photo of Cam Phillips
    Cam Phillips
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    4 pts
    @_

    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!!

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

    All your code essentially runs in an extra iframe now, so any “window” or “document” reference must become “parent.window” and “parent.document” now.

    This post has received 1 vote up.
    #345295 Score: 0
    Profile photo of Cam Phillips
    Cam Phillips
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    4 pts
    @_

    Thanks Sergey – getting somewhere now!

    By changing:

    dynamics.animate(document.querySelector('.beginTopicButton'), { <code> }

    To:

    dynamics.animate(parent.document.querySelector('.beginTopicButton'), { <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!!

    #345716 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    108 pts
    @jvalley4735

    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.
    #345745 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    169 pts
    @Klaatu

    Did Lectora pull the equivalent of a software jump the shark?

    #345898 Score: 0
    Profile photo of approg
    approg
    Member
    beginner
    intermediate
    curious george
    wise owl
    contributor
    friend finder
    picture perfect
    12 pts
    @approg

    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.

    #350393 Score: 0
    Profile photo of kc raven
    kc raven
    Member
    beginner
    intermediate
    wise owl
    friend finder
    curious george
    contributor
    1 pt
    @kraven7771

    Hey Jennifer,

    Is there any explains or tutorials on using these code items for when we’re doing seamless publishing with custom divs?

    #350473 Score: 0
    Profile photo of Jennifer Valley
    Jennifer Valley
    Moderator
    contributor
    beginner
    friend finder
    advanced
    lectora beginner
    verified member
    wise owl
    profile
    picture perfect
    curious george
    108 pts
    @jvalley4735

    Let me ask around.  I don’t think I’ve seen anything floating around on the website or Community.

    #352734 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    79 pts
    @mnotermans5114

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

    #352736 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    79 pts
    @mnotermans5114

    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

    #352885 Score: 0
    Profile photo of rwalters
    rwalters
    Member
    contributor
    beginner
    intermediate
    advanced
    curious george
    wise owl
    6 pts
    @rwalters

    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.

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.