• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Javascript Next and Previous Buttons

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

768

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
community guidelines
People's Champ ,
Nov 15, 2018 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.

Votes

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

Votes

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
community guidelines
People's Champ ,
Nov 15, 2018 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()

Votes

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

Copy link to clipboard

Copied

Thanks for the reply,

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

Votes

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
community guidelines
People's Champ ,
Nov 15, 2018 Nov 15, 2018

Copy link to clipboard

Copied

Try running this JavaScript and see what it logs:

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

Votes

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
community guidelines
People's Champ ,
Nov 16, 2018 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();

Votes

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

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines
Resources
Help resources