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

Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #344367 Score: 0
    Profile photo of Cam Phillips
    Cam Phillips
    Member
    beginner
    intermediate
    friend finder
    wise owl
    curious george
    contributor
    3 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
    120 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
    @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
    3 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
    336 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
    3 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
    91 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
    120 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
    7 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
    @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
    91 pts
    @jvalley4735

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

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

You must be logged in to reply to this topic.