Calling show with JS

Thanks, actionShow (and its sibling actionHide) is what I needed.

Thanks, actionShow (and its sibling actionHide) is just what I needed.

All Tim says is correct, but there are other ways on getting this kind of thing done as always.

First thing you have to decide whether you want the basic show functionality from Lectora or some javascript/html5 option to show elements. If you decide for the basic Lectora way, well then Tim's approach is good enough no doubt.

However if you want a fade over time of the element then HTML5/Javascript engines come to the rescue. jQuery, GSAP Tweenmax and many others can perform like that.

Ok lets assume you do want a fade over time. Next thing to decide is how to get your elements HTMLname. You can easily check in Lectora, like Tim does in his image... the first arrow pointing to the small triangle... clicking there will show you the HTMLname of the element. image288 in Tim's image. Tim's javascript then calls the basic Lectora functionality to show an image ( you even can add transitions on the image, i do think they will work )

If using TweenMax the code to tween/fade the image in would be something like..

var myElement = document.getElementById("image288");

TweenMax.to(myElement, 2, {autoAlpha:1});

This will show the element in a 2 seconds fade.

However both Tim's approach as the one mentioned above lack good reusability, because you cannot copy this from one Lectora file to another, the html name will change and you constantly need to be aware of that.

But offcourse there are options to take care of that too. Token replacement is one approach. The other option is adding a classname to an element and then using that for your script.

Ok, lets quickly describe these two options:

Token replacement:

If you add the click option to the element itself instead of a transparant button, you can point the script at the object itself like this:

var myElement = document.getElementById(%HTMLNAME%");

TweenMax.to(myElement, 2, {autoAlpha:1});

Lectora will automatically replace %HTMLNAME% with the correct id and now you can copy this element with working functionality from one Lectora to another.

When using Tim's direct Lectora solution you can do the same by adding the click with javascript onto the image.

var TimsElement = document.getElementById(%HTMLNAME%");

TimsElement.actionShow();

Another solution i use a lot is by creating a css classname for any specific object you want to animate.

Name as many as you want with the same classname, for example 'fadeMe'

Then in JS i create an HTMLObject of it by calling:

var fadingElements = document.getElementsByClassName("fadeMe");

now i can either run over this HTMLObject and animate all elements in it:

for (var i = 0; i undefined

TweenMax.to(item, 3,{autoAlpha: 1});

}

or just pick one of the elements in the HTMLObject ( somewhat alike an array )

TweenMax.to(fadingElements[0], 3,{autoAlpha: 1});

This method also allows you to easily reuse it in other Lectora files. Disadvantage here however is you need to watch your Lectora explorer properly. Top layer with the classname will be element[0], but once your accustomed to this it really opens new possibilities.

Kind regards,

Math

undefined

1. You can't use the title of the image, you'll have to find the html name (see screenshot how to get it).
2. You don't need to refer to the window object, that's only relevant if you wanted to use a variable for the html name.
3. ".show()" is not a function, ".actionShow()" is
4. In the end the javascript command would be similar to:

image1234.actionShow();

You've given me some food for thought.

I've not used %HTMLNAME% before. How can I use it to get the HTML name of a group?

Allthough i didnot get %HTMLNAME% working with groups, i think simply because it is not supported on groups, i shared an approach with which you can read all groups in a Lectora file with Javascript. They get collected into a HTMLCollection, which then you can target to show one or more of the groups in your .awt.

Check it here:

http://community.trivantis.com/shared-content/target-groups-with-javascript/

Regards,

~Math

I dont think it works for groups, just plain images. I am gonna check some projects, because i do vagely remember having a workaround for it for groups.

After some research I've discovered that Lectora creates an object with the HTML name of the group. The object has a property called childArray (of type array) which includes the HTML name of all the group's root level objects.

So by adding an action to one of the root level objects that runs some JS eg.

Var_root.set( "%HTMLNAME%" );

Then by checking though all groups (groups are DIVs whose IDs start with "og"), checking if they have a childArray property, and checking if the array includes the HTML name of the group root level object (_root) you can find the group in question.

@approg...sounds interesting..missed that apparently... Checking my sample in shared content with developer tools...i dont see an array anywhere there... done in L16, is it L17 specific maybe ?