Skip to main content
A
anton9800
Inspiring
July 7, 2016
Answered

setting text inside Web Object specific div

  • July 7, 2016
  • 1 reply
  • 850 views

Hello!  I am trying to figure out a way to take text from a Text Caption and assign it to a specific div inside of a Web Object.

I've tested it with a regular html site with an embedded iframe and it works great, but with Captivate i cant get the text pushed to a web object. 

The WebObject is named CC_box and inside of it there's a div with an id of "text" - that's where the text needs to go.  The Text Caption that holds the text is named CC_source_1 for first slide, then CC_source_2 for next, etc.

Here is my code:

var slideNumber = window.cpAPIInterface.getCurrentSlideIndex();                                //gets current slide number

var ccText = document.getElementById("CC_source_" + slideNumber).textContent;     //extracts text from a text caption on a current page - works great

$("#CC_box).contents().find("#text").html(ccText);                                                         //this line of code works perfectly in HTML, but not in Captivate

What is a proper way to access that div inside the web object from Captivate?

Thank you!

This topic has been closed for replies.
Correct answer anton9800

You can target the iFrame like this since you do not know it's name or id.

var getFrame = document.getElementsByTagName( 'iframe' )[ 0 ];

var myFrame = (getFrame.contentWindow || getFrame.contentDocument);

if (myFrame.document)

{

     myFrame = myFrame.document;

}

myFrame.getElementById("CC_box").innerHTML = "your text"


Thank you, I will try this out!

in the meantime I kept trying various things here and found that if I go "a level deeper" and call upon iframe directly as opposed to a div containing it, everything works, so in this case the following worked:

$("#myFrame_CC_boxc").contents().find("#text").html(ccText);

Also interestingly, Captivate appended a 'c' at the end of the div name, so even though I named the Web Object CC_box, it is actually called CC_boxc if you look at it in DOM explorer

1 reply

TLCMediaDesign
TLCMediaDesign
Inspiring
July 7, 2016

Because the web object is in an iframe, you need to target the iframe first and then the iframe content to access the div.

What is it that you are trying to do, there may be an easier way. It's much easier to target Captivate from the Web Object.

A
anton9800Author
Inspiring
July 7, 2016

Hello, and thank you for a response!

I thought $("#CC_box) was targeting the iframe, then searching inside for a div called "#text", no?  Worked in a mockup I made in HTML, at least.  Is the syntax different inside Captivate?

This is a closed captioning popup box that I'm making.  I know it is complicating things by using iframes as opposed to a text caption or built in CC functionality, but I cant think of any other way to do this.  The reason I am using iFrames for CC text is because some pages in the course I'm making have web objects of their own and they are always on top of everything, including the cc popups I made using captivate text captions.  The only thing I can cover up those web objects are other web objects, so I thought I'd use those for CC text as well.

Using cc via Audio Management is not an option because of lack of control I have over it (I need text to remain on screen even after audio is done, for example).

Thank you for looking at this!

TLCMediaDesign
TLCMediaDesign
Inspiring
July 7, 2016

You can target the iFrame like this since you do not know it's name or id.

var getFrame = document.getElementsByTagName( 'iframe' )[ 0 ];

var myFrame = (getFrame.contentWindow || getFrame.contentDocument);

if (myFrame.document)

{

     myFrame = myFrame.document;

}

myFrame.getElementById("CC_box").innerHTML = "your text"

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices