How to disable custom next button on specific slide number - removeEventListener not working??

[KeelyM]

I've created custom nagivation next/back buttons for my Captivate project by inserting .png's of my buttons, then attaching a javascript file that gives them the funtions of "window.cpAPIInterface.next();" and "window.cpAPIInterface.previous();"

All I'd like to do is 'disable' my next button on a certain slide (until a specific condition is met) - I'm at a loss as to why removeEventListener isn't working? I have something that looks like this - 

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide"); 
var nextBtn = document.getElementById("nextBtnc");

function runByPages(){
if(currSlide==27){
window.nextBtn.removeEventListener("click", nextSlide);
} else {
window.nextBtn.addEventListener("click", nextSlide);
}

runByPages(); 
function nextSlide(){
window.cpAPIInterface.next(); 
}

All of this is placed inside of a function which has an event listener for "CPAPI_SLIDEENTER", so I believe it should be running it each time the user moves to a new slide. 

For some reason, when I hit slide 27, my next button still goes through to the next slide when clicked. At one point I added an alert, to make sure it was detecting when the user was on slide 27, and it seemed to be detecting that just fine. 

I've looked into doing this with advanced actions and image buttons inside of Captivate, but I'm not seeing an option to set a button's display time to "for rest of project" and I really don't want to copy and paste my next button onto every slide. 

Any advice is greatly appreciated. 

[Lilybiri]

Cannot help you with the JS, but want to react to your last sentence. Image buttons are 'old', expect them to disappear soon. Since Captivate 6, quite a while ago, I only use Shape buttons, which can be filled with images. They can be displayed for the rest of the project, they can be added to master slides, to question slides and score slide. Missed that?

Captivate 11.5, most recent version, allows moreover to use bitmap images and SVGs directly as buttons, with the same features as shape buttons. They just lack the possibility to be defined in an object style.

Have a look at:

http://blog.lilybiri.com/overvew-6-button-types

As a JS expert you will probably not be interested by the easy shared action which you can use to hide/show custom navigation buttons on slides:

http://blog.lilybiri.com/shared-or-advanced-use-case-hide-slash-show-custom-navigation

[KeelyM]

Thanks so much! I'm by no means a JS expert, I didn't realize shape buttons could be filled with images - I'll take a look at that. Might be the way I need to go. 

Thank you!

[Lilybiri]

Look at:

http://blog.lilybiri.com/turn-an-image-into-a-button

[TLCMediaDesign]

That's because you didn't add the event listener, Captivate did.

Use:

cp.disable('nextBtn')

cp.enable('nextBtn')

You don't need to add the "c" to the end of the element name.

[KeelyM]

Thank you! I've tried using disable/enable like you have, but that doesn't seem to be working. I didn't apply any actions to my "button" in my Captivate project, in my Captivate project it is simply an image with the ID of "nextBtn". If I get rid of my nextSlide(); function and don't apply it to my next "button", the button doesn't do anything. I apologize if that wasn't clear in my original post.

Though I may go the route of having my "buttons" be actual proper buttons in captivate and then use cp.disable as you have listed. I can't seem to get it working the way I want entirely with my external javascript file unforunately. 

[Stagprime]

Sorry - didn't mean to double post the concept - this post was not up yet when I went into edit mode.

[KeelyM]

No worries - I think I'm going to go the route of using Captivate buttons, thanks to Lilybiri for pointing out shape buttons to me, then will try the disable/enable in my javascript file!

[Stagprime]

What if you tried the following...

If the name of the button on slide 27 is  "nextBtn"...

You can set the onSuccess action of the button to go to the next slide.

Otherwise - your code above appears to be missing a closing curly brace for the  runByPages()  function.

if(currSlide==27){
cp.disable("nextBtn");
}
else {
cp.enable("nextBtn");
}

[chrismay_at_delta]

You could put all this script in the button's success action > Execute Javascript.

var currSlide = cpAPIInterface.getVariableValue("cpInfoCurrentSlide");
if(currSlide==27){
   return;
} else {
   window.cpAPIInterface.next(); 
}

You can do the same logic with Captivate's advanced actions. In either case make sure the "Continue Playing the Project" checkbox is unchecked.

The option to display for the rest of the slide is under the Timing tab.