Are there JS representations of Captivate

[sp_pdidakt]

Are there Captivate Javascript representations of smart shapes that I could use to manipuate the smart shapes?  Something similar would be how Jquery wraps DOM objects with functionality to make DOM objects easier to manipulate...       

One thing I would like to do is easily change the fill color of the smart shape using Javascript.   $('#SmartShape1').css('background','blue') doesn't work because it completely paints over the text in the smart shape....

Thanks for any help!     

[mohanadas]

Hi Ryan,

May I know what is your use case and which version of Captivate you are using?

Thanks,
Mohana

[margotr87738836]

Hello Mohana,

Thanks for the response.

I am using Captivate 9.

I would like to change the CSS properties of a Captivate button to match the CSS properties of my customer's buttons they have on their website.  I thought I may be able to do this if there were some sort of JS representation of Captivate buttons / smart shapes I could manipulate...

Thanks for any help!

[sp_pdidakt]

Hello Mohana,

Have you made any progress with this question?

[TLCMediaDesign]

You can manipulate the objects with JavaScript, but be aware that they are canvas elements, not as simple as with a standard div.

[sp_pdidakt]

Thanks!  I am looking forward to your "Using Javascript with Captivate" book. : )

[TLCMediaDesign]

Not sure if we are going to do a book or if we are going to offer online seminars. We are going to be offering online Captivate training in the near future and JavaScript in Captivate may be a part of that series.

[sp_pdidakt]

I am really interested in the deeper JS stuff, but I may be one of only a very few.

[sp_pdidakt]

Hello,

There is probably a simple answer to this question, but I'm going to risk looking dumb. : )

When playing with an exported project, Smart Shapes, etc, in the DOM are easy to access using something like document.getElementById from the browser's console. What I dont understand is why the DOM objects dont repond to something like the following: document.querySelector('#SmartShape_21').style.display="none"? Even in the DOM, the node will show style="display:none" but the smart shape will still be visible...