Explore the community Forums Lectora Online Lectora Online Questions & Answers CSS/Javascript is not working the same in Online and Inspire

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #370187 Score: 0
    Profile photo of K Nemcek
    K Nemcek
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    @knemcek8969

    Hello Everyone-

    I am new to this community and  Lectora. I was trying to get a better idea how to use HTML extensions. I found the blog about using CSS and JavaScript to control the look of a text entry field, so I figured I would start with this to get my feet wet.  The goal was to create a CSS, add it as an extension and then use JavaScript to apply it to the text entry field. When I tried to create this in Lectora Online, I could not get the class to be applied to the field. I tried the same thing with Lectora Inspire (still have the trail version) and I was able to get it to work.

    I noticed two things that were different with Online:

    1. The edit button is not active so I could not edit the CSS once I uploaded it.
    2. To get this to work in Inspire once I published to SCORM, I had to unchecked the “Publish for Seamless Play” in the Publish settings. I did not see that option in Lectora Online.

    Does anyone know what I might be doing wrong in Lectora Online?

    I have attached the two different files:

    Test CSS JavaScript.pkg (Lectora Online)

    KNTestCSS (Inspire)

     

    #370550 Score: 0
    Profile photo of K Nemcek
    K Nemcek
    Member
    beginner
    intermediate
    friend finder
    curious george
    wise owl
    @knemcek8969

    I still can’t see what is causing this problem, can someone help me please?

     

    #370616 Score: 1
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    74 pts
    @wheels

    Ok, so a couple of things.

    1. We need to fix the issue with not being able to edit the css file. A workaround is to insert an external html object that is type Meta tags, then define your classes there within a <style> tag, for example:
      <style>
      .sky {background-color: powderblue;}
      </style>
    2. I really try to stay away from using the html name explicitly, it makes it hard to reuse things.  For example you could just put an on show action attached to the entry field in your example.  It would be a run javascript action with the following code:
       triv$(%HTMLNAME%.dCon).addClass(‘entry1’);
      What this does is substitute the action’s parent object’s html name for you.  The triv$ is an internal jQuery reference (this is only currently available in Lectora Online).  The html name gives you access to DOM elements and some methods on the runtime object.  dCon in this case is a reference to the DOM input element. %HTMLNAME%.div would be the higher level div which is used for positioning.
    3. If you wanted to do all input elements on a page you could just do an on page show action that runs the following javascript:  triv$(‘input’).addClass(‘entry1’);
    4. If you are doing any more sophisticated scripting you might want to consider global references for the objects you are working with. Do this by adding an action on page show to the objects you will be working with and run the following javascript:
       window.myFormObject1 = %HTMLNAME%;
      Then in other scripting you can safely reference window.myFormObject1 and then the scripting becomes portable, meaning you can copy the objects to another title or library object and it will not break because object html names change.  You can see an example of this in my title here: https://community.trivantis.com/forums/topic/add-bookmark-to-multiple-pages/

    Hope this helps, we are working on an API that will work across Lectora (Online and Desktop).  I am trying to make this a priority since Lectora really is unique in letting you customize everything through scripting if you want to.

    – Joe

    This post has received 1 vote up.
    #370618 Score: 0
    Profile photo of Joe Wieloch
    Joe Wieloch
    Moderator
    beginner
    intermediate
    friend finder
    contributor
    LUC16 Attendee
    verified member
    wise owl
    LUC17 Attendee
    advanced
    picture perfect
    74 pts
    @wheels

    Seamless Play Publish is coming in LO later this year.  The referencing will be a little different, instead of window. you would use an API to get the display window (getDisplayWindow()).

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

You must be logged in to reply to this topic.