Highlighted

Javascript Next and Previous Buttons

Explorer ,
Nov 15, 2018

Copy link to clipboard

Copied

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>

          <link rel="stylesheet" type="text/css" href="style.css">

     </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?

Views

452

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

Javascript Next and Previous Buttons

Explorer ,
Nov 15, 2018

Copy link to clipboard

Copied

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>

          <link rel="stylesheet" type="text/css" href="style.css">

     </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?

Views

453

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
Adobe Community Professional ,
Nov 15, 2018

Copy link to clipboard

Copied

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.

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...
Explorer ,
Nov 15, 2018

Copy link to clipboard

Copied

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:

Errors.png

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...
Adobe Community Professional ,
Nov 15, 2018

Copy link to clipboard

Copied

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()

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...
Explorer ,
Nov 15, 2018

Copy link to clipboard

Copied

Thanks for the reply,

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

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...
Adobe Community Professional ,
Nov 15, 2018

Copy link to clipboard

Copied

Try running this JavaScript and see what it logs:

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

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...
Adobe Community Professional ,
Nov 16, 2018

Copy link to clipboard

Copied

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();

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...
Explorer ,
Nov 29, 2018

Copy link to clipboard

Copied

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.

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...
Resources
Captivate User Guide
New Group