Javascript Next and Previous Buttons

Report · Nov 15, 2018

Hi,

So i am trying to create a Next and Previous button with Html, Css and Javascript. The reason for this is because it's retina friendly.

I have found this post: Javascript go to next slide from Web Object and tried to add the following line of code in my html file:

<button type="button" onclick="parent.cp.goToNextSlide()">Continue</button>

So the html file looks like this:

<html>

<head>

</head>

<body>

<button class="volgende" type="button" onclick="parent.cp.goToNextSlide()">Go to next slide</button>

</body>

</html>

I published the file on my webserver and added the link in a web object in Captivate.

Unfortunately the button doesn't work.

Does anyone knows what i'm doing wrong here?

Report · Nov 15, 2018

Where is the Web Object, that page you are linking to in relation to your Captivate published file?

Open the console and see what errors are being generated, if any. Press F12 in the browser.

Report · Nov 15, 2018

The web object is in a folder on my webserver where my website is running aswell.

The following warnings and errors showing up in the console:

Report · Nov 15, 2018

I don't think the code you are using is not going to work since the webpage is not actually a child of the Captivate file. It's just a link.

Don't have access to my server at the moment to test, but you could try this JS:

window.opener.cp.GoToNextSlide()

Report · Nov 15, 2018

Thanks for the reply,

Unfortunately window.opener.cp.GoToNextSlide() doesn't work.

Report · Nov 15, 2018

Try running this JavaScript and see what it logs:

console.log(window.opener, window.parent);

Report · Nov 16, 2018

Couple of things:

You say that you are putting these buttons in a separate web page because they are retina ready, what about the rest of the project that these button at in?

Also, zip that html file an insert as an HTML5 animation. Then use the JavaScript:

window.parent.window.cpCmndNextSlide=1;

or

window.parent.window.cpAPIInterface.next();

Report · Nov 29, 2018

Thanks TLCMediaDesign for the reply and sorry for the late response. I'm gonna try this code and i will let you know if it works or not.