Skip to main content
K
KeelyM
Inspiring
October 17, 2019
Question

Using external js file to execute functions - find/get current slide numbers

  • October 17, 2019
  • 1 reply
  • 1027 views

Hey there, I'm working on a Captivate project and using an external javascript file to control my navigation buttons. Besides not having to republish my project over and over again, I like using an external javascript file to animate my navigatoin buttons a bit with greensock.

 

I'm really rusty with javascript and people on the forums have helped me a lot in getting as far as I am - currently my external js file starts out with - 

var interfaceObj;
var eventEmitterObj;
window.addEventListener("moduleReadyEvent", function(evt){
interfaceObj = evt.Data;
eventEmitterObj = interfaceObj.getEventEmitter();
initializeEventListeners();
});

and then all my animations/functions are placed inside of the initializeEventListeners(); function. 

 

The issue I'm running into is I've written out functions for my back button (with an id of 'backBtn'), but that button doesn't show up until the second slide of the project - so when the project tries to read my javascript on the first page it throws errors at me since the 'backBtn' doesn't techincally exist yet (I'm guessing that's why?) 

 

My question is - how could I set it so that my functions for my back button don't try to execute or be read until I'm on the second slide of my project. I've tried a few different ways to get the slide numbers and put in an if statement about it - but so far all my attempts are failing. 

 

In general I think it would be really nice to be able to determine which slide/slides I want a function to be 'located' on (if that makes sense)?  But I'm not sure what is the best way to go about this. Any advice is appreciated a lot, thanks! 

 

This topic has been closed for replies.

1 reply

K
KeelyMAuthor
Inspiring
October 18, 2019

If anyone else runs into this issue it is a pretty easy fix - I just had to do some more digging. 

I found that cpAPIInterface.gteVariableValue("cpInfoCurrentSlide") will return the current slide number so I put it into a variable called 'currSlide' and then made a function with an if statement - 

function secondPage(){

if(currSlide>=2) {

}

 

Then I add in my functions/animations for my back navigation button and then I call that function. 

I'm sure there's probably a better way of doing this, but for now it seems to be working!

 

chrismay_at_delta17095116
chrismay_at_delta17095116
Inspiring
October 18, 2019

There is also the SLIDE_ENTER_EVENT that you can listen for. It fires every time you enter a slide.

    K
    KeelyMAuthor
    Inspiring
    October 18, 2019

    That's what I have my main function running through - 

    function initializeEventListeners(){
	if(interfaceObj){
		if(eventEmitterObj){
			eventEmitterObj.addEventListener("CPAPI_SLIDEENTER", function(){

     but since it fires on the first slide, and my back button element doesn't exist until the second slide, when I had event listeners targeting my back button inside this main function, it would give errors in the console.log on the first slide and break my button functionality. (At least I think that's what was happening?) Once I put everything for the back button inside of my secondPage() function which has the if statement to see if we're on the second slide - it seems to be working. 

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices