Highlighted

Accessing functions & css classes of a webobject through an added JS file

Engaged ,
Nov 19, 2019

Copy link to clipboard

Copied

I'm trying to acess elements inside of a web object that I've added into my Captivate project, through an external javascript file that I've linked to the index.html output file of my project. I'm pretty stuck on how to do this, but essentially I'd like to be able to control my webobject via the external JS file. 

 

I built my webobject with an html/css/js file structure and it uses css classes to toggle some animations. Is there any way possible I could call the function I created in my webobject from my external JS file? In my external JS file I made function for custom navigation back/forward buttons, and I'm hoping that once the user lands on the slide with the web object, the next button would then activate the function of my webobject, instead of taking the user to the next page, then once that's done it would move the user to the next page? 

 

I hope some of this makes sense, any point in the right direction would be greatly appreciated! 

 

An update - I wasn't able to get the WebObject function working when being called from an external JS file, so instead I added the function to an object in my Captivate project from the WebObject's JS page. So it looks something like this - 

 

window.parent.window.myCaptivateButtonVariable.addEventListener("click", myFunction);

 

Which so far, seems to be working! It's a pain, because any changes I need to make I have to go back and edit my WebObject files, zip them again, replace the WebObject in my Captivate file, then republish my Captivate file. But it's working!  

TOPICS
Advanced

Views

441

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Accessing functions & css classes of a webobject through an added JS file

Engaged ,
Nov 19, 2019

Copy link to clipboard

Copied

I'm trying to acess elements inside of a web object that I've added into my Captivate project, through an external javascript file that I've linked to the index.html output file of my project. I'm pretty stuck on how to do this, but essentially I'd like to be able to control my webobject via the external JS file. 

 

I built my webobject with an html/css/js file structure and it uses css classes to toggle some animations. Is there any way possible I could call the function I created in my webobject from my external JS file? In my external JS file I made function for custom navigation back/forward buttons, and I'm hoping that once the user lands on the slide with the web object, the next button would then activate the function of my webobject, instead of taking the user to the next page, then once that's done it would move the user to the next page? 

 

I hope some of this makes sense, any point in the right direction would be greatly appreciated! 

 

An update - I wasn't able to get the WebObject function working when being called from an external JS file, so instead I added the function to an object in my Captivate project from the WebObject's JS page. So it looks something like this - 

 

window.parent.window.myCaptivateButtonVariable.addEventListener("click", myFunction);

 

Which so far, seems to be working! It's a pain, because any changes I need to make I have to go back and edit my WebObject files, zip them again, replace the WebObject in my Captivate file, then republish my Captivate file. But it's working!  

TOPICS
Advanced

Views

442

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Nov 19, 2019 0
Advocate ,
Nov 19, 2019

Copy link to clipboard

Copied

I do not work with external files but I do quite a bit of scripting within Captivate. Perhaps the issue here is the same.

Captivate will append a lower case 'c' to the end of the name of your Web Object.

 

For example - if I have a web object named   web1  I would need to address it as   web1c   in order to find stuff within it and do something to it.

At least this has been my experience. Perhaps you might try addressing it the same way with the external file.

I realize it is not necessaily the same but I did a series on sliders which are entered as web objects. I talk about using JavaScript to work with it here.
https://elearning.adobe.com/2018/05/set-variables-interactive-sliders-part-4-javascript/

 

Maybe you can get something helpful to get you going in the right direction with it.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 1
Engaged ,
Nov 19, 2019

Copy link to clipboard

Copied

Thank you! I'll take a look at the link and read through it!

 

I've been able to identify and access my webobject via the method you mentioned, appending a 'c' to the end of the ID. However, from there, I'm at a loss of how to access elements inside of the webobject? 

 

I've tried messing around with "children()" but I'm not much of a coder, I didn't get very far with that. 

 

For example, I have a div with the ID of "left" inside of my webobject, would it be possible to access that div from an external JS file after my Captivate project has been published? 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 0
Advocate ,
Nov 19, 2019

Copy link to clipboard

Copied

Hunting down an item with an ID will use a hashtag.

For example...

 

$("#left").click();

 

would emulate a click on the object with the ID  'left'.
Based on what you have going on with your web object - things may get a bit more complicated but that would be the gist of it. Depending on what you want to perform may also require you to add that  c  to the child object.

 

$("#leftc").animate({left: "+=100px"});

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 1
Advocate ,
Nov 19, 2019

Copy link to clipboard

Copied

Hi Keelym,

web objects (WO) are in Captivate's HTML5 output nested in iframes. So in order to access objects which are located in your WO you have to start with the path to the window (iframe) which hosts your WO (using the window property frames).

 

window.frames[0]

 

This assumes that you have just one WO in your Captivate slide. Now if you want to manipulate at runtime some css of your div with id "left", you could

 

window.frames[0].getElementById("left").style.backgroundColor = "red";

 

If you want to trigger a function inside your WO from Captivate or your external javascript, you'll have to assign this function in your WO to the window object:

 

window.myWebObjectFunction = function() {
  // do stuff
};

 

Then you can trigger the function this way:

 

window.frames[0].myWebObjectFunction();

 

All depends of course on the kind of WO you are dealing with.

Klaus

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 2
Advocate ,
Nov 19, 2019

Copy link to clipboard

Copied

I like learning new ways to do the same thing.

I have been accessing web objects by naming them directly such as  $("#myFrame_web1c")

I am going to have to try the window.frames[0] approach one of these days.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 19, 2019 2
Engaged ,
Nov 20, 2019

Copy link to clipboard

Copied

Thanks so much kdmemory!

 

I'm trying out this method - I've added my function inside of the webobject's JS page as such - 

window.myWebObjectFunction = function() {

// function stuff 

};

 

 

Then once placed into my Captivate project and the project is published, I attach a new JS file and I try to call the function like you have written out - 

 

window.frames[0].myWebObjectFunction();

 

Though it is returning as an undefined function in the console log. 

 

It's the only webobject on this slide of my project and I have it set inside of a function that listens for new slide enter, then inside of a function which listens for if the user is on the correct page, it's something like - 

 

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide");

function runByPages(){
if (currSlide==27){
window.frames[0].myWebObjectFunction();
}

runByPages();

 Would something about the way my WebObject is built be causing issues? My webobject is essentially a zipped file including an html, css, and js file along with any images that are used inside of it. Then I just drag and drop the zipped file into my Captivate project. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 20, 2019 0
Engaged ,
Nov 21, 2019

Copy link to clipboard

Copied

An update - I wasn't able to get the WebObject function working when being called from an external JS file, so instead I added the function to an object in my Captivate project from the WebObject's JS page. So it looks something like this - 

 

window.parent.window.myCaptivateButtonVariable.addEventListener("click", myFunction);

 

Which so far, seems to be working! It's a pain, because any changes I need to make I have to go back and edit my WebObject files, zip them again, replace the WebObject in my Captivate file, then republish my Captivate file. But it's working!  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 0
Participant ,
Nov 21, 2019

Copy link to clipboard

Copied

I would have chimed in if I realized you had JS running in your web object. 

I do the same thing but opposite!

 

I create an empty captivate variable, then from the JS in the webobject I set a reference, in my case to a javascript object, but it could just as easy be a reference to the webobject window.

 

in captivate: 

 theWebObject=""

 

in the webObject JS:

window.parent.theWebObject = this;// or window.name

 

Then in Captivate I can write simple JS code to call functions.

On a button's success action: 

theWebObject.myFunction("play");

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 21, 2019 1
Engaged ,
Dec 03, 2019

Copy link to clipboard

Copied

Hi Chris, thank you so much for this response! I've finally gotten around to trying it out this way and I'm having some difficulty. How I have it set up is in my webObject's JS I have - 

 

window.myFunction = function(){
// does stuff 
}

window.parent.theWebObject = this;

Then in Captivate, I gave my button an advanced action which tells it to execute javascript on Slide 27, in my execute javascript window I put - 

 

theWebObject=""

theWebObject.myFunction("play");

However, when I run my project and it gets to Slide 27, when I hit my button it says that "theWebObject.myFunction" is not a function. Is there a step/piece that I am missing? Should I be using "window.parent.theWebObject = window.name" ?

 

Thank you for your help. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 03, 2019 0