how to apply javaScript to text box/objects?

cshanahan9902 Community Member Posts: 11
Basic text transition/effects do not work within a client's template.

I have found the JavaScript below embedded into the template, I assume that this JavaScript is the key to transitions and effects working?
However I don’t know how to apply the javascript to the text field/object.(i have limited knowledge of lectora inspire and JavaScript

Any help would be appreciated?

See the below JavaScript

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="smoothHTMLtransitions.js"></script>
<script type="text/javascript">
var SpeedMultiplier = 500; //ms - higher number = slower transitions, relative to Lectora transition speed setting
var MoveToSpeedMultiplier = 100; //ms - for Move To actions
// Choose how far the flys will start from their ending point
var FlyRightDistance = 200; //px
var FlyLeftDistance = 200; //px
var FlyTopDistance = 200; //px
var FlyBottomDistance = 200; //px
var SizeToFromCenter = true;
// Choose an ease for each type of effect
// // Easing Types
// // swing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart,
// // easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine,
// // easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc, easeInElastic, easeOutElastic,
// // easeInOutElastic, easeInBack, easeOutBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce
var MoveToEase = "swing";
var SizeToEase = "swing";
var FadeInEase = "swing";
var FadeOutEase = "swing";
var FlyInRightEase = "swing";
var FlyOutRightEase = "swing";
var FlyInLeftEase = "swing";
var FlyOutLeftEase = "swing";
var FlyInTopEase = "swing";
var FlyOutTopEase = "swing";
var FlyInBottomEase = "swing";
var FlyOutBottomEase = "swing";
var FlyInTopRightEase = "swing";
var FlyOutTopRightEase = "swing";
var FlyInTopLeftEase = "swing";
var FlyOutTopLeftEase = "swing";
var FlyInBottomRightEase = "swing";
var FlyOutBottomRightEase = "swing";
var FlyInBottomLeftEase = "swing";
var FlyOutBottomLeftEase = "swing";
var WipeDownInEase = "swing";
var WipeDownOutEase = "swing";


  • approg
    approg Community Member Posts: 258 ♪ Opening Act ♪
    The latest version of jQuery released in 2016 is version 3.1. DO you really want to use a 5+ year old of jQuery?

    There's no easy way to know what the identifier of Lectora element is. What I've started doing is what someone here suggested ie. add a custom CSS class name to the element (within Lectora 17) and then in my JavaScript I refer to it with

    getDisplayDocument().querySelector(".my custom CSS class name here");

    Having said that the JavaScript that Lectora uses is not well documented and not guaranteed to not change from version to version.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916 ☆ Roadie ☆
    The script you use is old. Its from Lectora X10 era... at that time you couldnot set CSS classes for elements in Lectora thus this approach was needed to work with JS in Lectora X10. From version 11 and up that has changed very much.
    Although i did notice this old way of using Javascript in Lectora worked up to version 16, you should only stick to it if you have an older version then Lectora 11... Follow Carls and approgs links and/or search the community for how to use Javascript in newer versions.

    Actually i did use the script ( smoothHTMLtransitions.js ) too in X10. What it elements the option for a transition ( eg. fade ) now is as default available in the latest versions of Lectora. I am not sure in which version it debuted, but with the latest versions of Lectora you can simply select a transition for a page-element.

    Kind regards,
  • cshanahan9902
    cshanahan9902 Community Member Posts: 11
    Thank you so much for your suggestions.

    I am working with lectora inspire 17 version and I have attempted to use the basic transitions “Fade in” /under properties on text box but it does not work within this template. I have been asked to do various animations from basic text fade on screen to more complex transitions of objects.

    I attempted your suggestion

    and also the below link which is very close to what I am hoping to achieve.

    In both cases I have followed instructions as requested but I cannot see either samples when previewing (I am connected to the internet when viewing). I have attached both to see what the issue might be.

    Also when delivering to the client the published form will be an “exe” so will this affect how the JavaScript is applied?(Again my knowledge of JavaScript is Zero) I notice the instructions mention... If you don’t want to rely on someone else’s server, you can download the file from, attach it to your title.... What is the file extension the code is placed in when attaching it to the title.

    Again Many thanks for your help
  • cshanahan9902
    cshanahan9902 Community Member Posts: 11

    Would anyone be able to tell me why the 2 attached samples do not appear when previewing locally?

    Many thanks
  • timk
    timk Community Member Posts: 1,236 ✭ Legend ✭
    Hi, there are several issues in both files:

    You're using unsuitable quotes in all your custom js actions and HTML extensions. These need to be replaced with real quotes, so that they look like this " or this &#039;. Currently your quotes are like this " '

    In your first file "fade-up..." ...

    ... jQuery itself is missing, so it can't work. You'll either have to attach it as an "Additional .js file" or link to the library that's hosted online as you did in the 2nd file (but with real quotes).

    With regards to the second file ...

    ... You can't define a function in a "Run javascript" action. Lectora turns the code in the action into a function so there must not be another function in it. You can define a function in an HTML extension and call it in an action.

    ... Your code to add an event listener to the checkboxes will be overridden by Lectoras own code for the checkboxes. You can add "On: Select/change" actions to the checkboxes if you want something to happen when the checkbox is changed.

  • cshanahan9902
    cshanahan9902 Community Member Posts: 11
    Hi Tim,

    thank you very much for your help. I have implemented your suggestions and i can now view it the file in preview, can you please explain why the gradual fade transition are not taking effect on each button as set in the code.

    Many thanks again.
  • timk
    timk Community Member Posts: 1,236 ✭ Legend ✭
    The fading does work, doesn't it?. But your groups aren't "initially invisible" so they are all faded in when the page is loaded. Your Show actions have no effect because at that time all are already visible.