setting text inside Web Object specific div

[anton9800]

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!

[TLCMediaDesign]

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.

[anton9800]

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]

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"

[anton9800 · Accepted solution]

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

[TLCMediaDesign]

Captivate appends a "c" if it is a canvas element.

[anton9800]

Understood!  Thank you very much for your help, as always!

[anton9800]

I have a followup question if you dont mind:

I have now successfully extracted text from the Text Caption, however all formatting has been lost (no breaks, indentations, lists, etc).  Is there a way to keep that, so when I populate that iframe div with said text it looks legible?

In the past, using javascript I achieved similar results by putting a special character, like a | (pipe delimiter) and then splitting text into parts of an array.  I then iterated through the array and simply added <br> after each piece was written to the div - similar to this:

var splitText = ccText.split("|");

for (i=0; i < splitText.length; i++){

     $("#myFrame_CC_boxc").contents().find("#text").html(splitText + "<br><br>");

}

The problem is - I cannot use loops in the advanced actions JS.  I suppose I could load all the CC text externally, but I'd much rather have as much of it inside Captivate as possible.  Could you recommend anything here?

Thank you!

[TLCMediaDesign]

I don't use the Captivate JS Window. I put my scripts in and external JS file.

[TLCMediaDesign]

You also may be able to solve all of your problems if you set useWidget7 to 1 in the captivate.ini file.

[anton9800]

That was the first thing i tried.  And while it does fix the problem of Web Objects being forced on top of everything, it also removes all interactivity from them, so I had to scrap that idea, unfortunately. 

[TLCMediaDesign]

I agree that that is an issue in Chrome, IE still has interactivity. I'm trying to figure out why the iFrames lose interactivity in Chrome.

[anton9800]

That's interesting - I lose functionality regardless of what browser I use!  I mainly test with IE, but Firefox acts the same.

Also - though I havent tested it with other interactions, but scrolling text acts same as an iframe - with useWidget7=0 it hovers over everything, with useWidget7=1 it loses interactivity