Hiding elements using external JavaScript

[anton9800]

Hello!  Hopefully an easy question here.

I have buttons in Captivate 9 that I need to hide/show using an external JavaScript that comes from an imported HTML5 animation.

Currently, I am trying to do it in this manner (although unsuccessfully):

The next button is named "next_button_2" since it's on slide #2.

Inside of index_scorm.html I added a function:

     function disableNext()

     {

          var slideNumber = window.cpApIInterface.getCurrentSlideIndex(); //to get the current slide number

          var nextButton = $("#next_button_" + slideNumber);

          //then I tried using code like nextButton.style.visibility  = "hidden"; or nextButton.hide(); etc, but nothing seems to take.  I'm sure I'm not pointing to the element           properly.

     };

Inside imported HTML animation I have the following code:

     window.onload = function disableButton()

     {

          parent.disableNext();

     };

I know the functions are talking to each other as I've experimented with passing variables, I know the slideNumber variable is assigning a right number.

How do I point to the right object to hide/unhide it?

Thank you!

[TLCMediaDesign · Accepted solution]

window.parent.cp.hide("next_button_" + slideNumber)

[anton9800]

Thank you very much!  Perfect!

[dmitriyo60959643]

TLCMediaDesign​

Could you help me to get this code work. So far I was not able to do it.

I was able to get working the code that starts with window.cpAPIInterface. Ex: window.cpAPIInterface.next(); (Mainly the stuff that is listed in Common JS interface article)

But, I could not get working the code that starts with window.parent.cp. Ex: window.parent.cp.hide(e.Data.itemname,+6);

What I did so far:

I have a smarshape called "numberBox". It is on the slide number 6 (no slide name or title).

The code that I tried, but it did not work:

window.parent.cp.hide("numberBox",+6);

window.parent.cp.hide('numberBox',+6);

window.parent.cp.hide('numberBox', '6');

... and all other possible variations

Could you please write the code that would hide it.

Thanks a lot in advance

[TLCMediaDesign]

window.parent.cp.hide("numberBox");

There is only one argument to pass into the cp.hide() function. It the property name of the element. Using the comma you are creating 2 arguments.

It you want to make the code a little more dynamic for like names on successive slides you could use:

window.parent.cp.hide("numberBox" + window.parent.window.cpInfoCurrentSlide);

[dmitriyo60959643]

TLCMediaDesign​

Thank you

[TLCMediaDesign]

Also if you just want to disable/enable:

window.parent.cp.disable("next_button_" + slideNumber)

window.parent.cp.enable("next_button_" + slideNumber)

[anton9800]

Thank you!  Similarly, how would I pass a value to a text caption?

something like

var myTitle = "Hello!"

document.Captivate.cpEISetValue("Title_2", myTitle);

And for that matter - is there an API I can look at?  Thank you again!

[TLCMediaDesign]

The only real reference for the API is:

Common JS interface

There's only so much in there. The rest is from dissecting the CPM.js.

All of the Captivate variables are in the window object, so unless you are using SWF and HTML5, I just use the window:

window.Title_2 = "Hello";

If you want to set using the interface:

window.cpAPIInterface.setVariableValue("Title_2", "Hello");

[anton9800]

it's the same as with the next button.  The caption is created in Captivate and is assigned a name of Title_2 then I need to change the text inside of it using a custom function inside index.html with a value that gets pushed from an HTML5 animation.  All that works great, I can assign new values to the Title_2, it shows up in console.log if I call it, etc but I cannot figure out how to get actual text displayed inside that caption.

[Lilybiri]

Because you have to insert the variable in the text container (shape or caption), using the X button in the Character part of the Properties panel. Maybe I misunderstand, but you seem to label the container with 'Title_1', not the embedded variable?

[TLCMediaDesign]

You need to define a variable in Captivate, v_Title_2. Then for the text in the text caption: $$v_Title_2$$.

Then you can populate the variable from within the animation:

window.parent.window.v_Title_2 = :"Your new Title"

[Lilybiri]

If you want that text to be displayed in a text container, you'll have to put a user variable in that text container and populate that variable with the JS.

Have a look at this help page:

Common JS interface

[anton9800]

Ok, makes a whole lot more sense now!  Thank you very much, TLCMediaDesign and Lilybiri!

[kristam26572151]

Hey guys! I am trying to hide a text caption in Ccaptivate 10. I am using this code: document.getElementById("Text_Caption_69").style.visibility="hidden"; But it is not working. Can you give me any suggestions? The elements are in fluid box

[sabre123]

If you really want to hide an object in this manner, try adding a "c" to the end of the element's ID to target the canvas element:

document.getElementById("Text_Caption_69c").style.visibility="hidden";

[TLCMediaDesign]

It's much easier to use cp.hide("Text_Caption_69");

Let Captivate do the work of getting the element by id for the normal and canvas element as well as the re-wrap element.

[sabre123]

100% agree with that...

[kristam26572151]

Do you know how i can make a text caption visible?

[Lilybiri]

cp.show ("Text_Caption_69");

First reflect if you really need to use JS? So much easier with simple commands, advanced/shared actions which are converted to JS on runtime. I totally agree that not everything can be done with those actions, but for simple hide/show JS is overkill. If you are on CP9 or CP2017, have a look at multistate objects. Since they appeared I will not use Show/Hide that much anymore...