Skip to main content
T
Tazzy
Known Participant
August 16, 2016
Question

Custom Navigation Buttons and Determining End of Slide

  • August 16, 2016
  • 2 replies
  • 1071 views

Hi everyone,

I have created a set of custom navigation buttons for a template which I am using on a responsive design (buttons are sized, positioned and shown or not shown as appropriate for different breakpoints).

Custom Buttons 

Home, Replay Slide, Pause/Play (2 buttons with actions to hide & disable or show & enable each button), Back one slide, Forward one slide, Audio on / Mute, TOC Toggle, CC Toggle, Glossary Toggle and Resources Toggle.

All works well...When the project plays, the  pause button is enabled and displays correctly. If I click the pause button the project pauses, the pause button is hidden and disabled and the play button is shown and is enabled. If I click the play button, the project plays, the play button is hidden and disabled and the pause button is shown and is enabled. 

The issue....

What I would like is that when the project is playing and reaches the end of the last frame on each slide, the play button automatically shows and is enabled and the pause button automatically hides and is disabled.....in other words, the same functionality as you would have in an out of the box Captivate navigation bar.  

I have tried adding a button on the slide (10x10, invisible to the eye and on correct place on timeline) in top corner, hoping this would trigger Captivate to know that the project was paused when at end of last frame...no joy

I have tried using the CP system variable of cpCmndPause in a Conditional Action so that when cpCmndPause = 1, show/enable pause button and hide/disable play button...no joy

 

Has anyone been successful with doing something like this ?  All help gratefully received !!

    This topic has been closed for replies.

    2 replies

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    August 16, 2016

    If you add eventlisteners for enterSlide and a variablevalue change you can get the last frame of every slide. The following JavaScript will do exactly what you want. On enter of every slide you can show or hide specific buttons and then within 5 frames of the end of the slide show or hide other buttons. YOu can put this in the head of the html page or in an external JS file.

    var interfaceObj, eventEmitterObj, csTo;

    window.addEventListener( 'moduleReadyEvent', function ( e )
    {
    interfaceObj = e.Data;
    eventEmitterObj = interfaceObj.getEventEmitter();
    initializeEventListeners();
    });

    function initializeEventListeners()
    {
    if ( interfaceObj )
    {
         if ( eventEmitterObj )
      {
             eventEmitterObj.addEventListener( 'CPAPI_SLIDEENTER', function ( e )
       {   
        eventEmitterObj.addEventListener( 'CPAPI_SLIDEEXIT', exitSlide, false );
        setPage( e );
                });
      
       function exitSlide( e )
       {
        window.cpAPIEventEmitter.removeEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
        {
         runTimer(); }, 'cpInfoCurrentFrame'
        );        
       
        eventEmitterObj.removeEventListener( 'CPAPI_SLIDEEXIT', exitSlide, false );   
       }
      }
    }
    }

    function setPage( e )
    {

    csTo = e.Data.to;
    //cp.show( 'pause_btn' );
    //cp.show( 'play_btn' );
      
    window.cpAPIEventEmitter.addEventListener( 'CPAPI_VARIABLEVALUECHANGED', function ()
    {
      runTimer( e ); }, 'cpInfoCurrentFrame'
    );
    }

    function runTimer()
    {
    if ( window.cpInfoCurrentFrame > csTo- 5 )
    {
      //show or hide your elements
    }
    }

    C
    christopherm88824775
    Participating Frequently
    May 12, 2017

    @TLCMediaDesign - Can this Javascript be run from within Captivate with the Execute Javascript action?

    We're looking for the same functionality - Disabling our next button until the end of the slide, and this is the closest solution I've seen so far.

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    May 15, 2017

    The script I posted will NOT work. I'd need to do some tests to see how you could grab the last frame of the slide. The enterslide event would already have fired if you execute JS on slide enter.

    I'll see what I can find and post back.

    RodWard
    Community Expert
    RodWardCommunity Expert
    Community Expert
    August 16, 2016

    Everything in Captivate is event-based.  If you want something to happen, you have to use one of the many runtime events that are available for triggering actions.  Just placing a button on the timeline at a given point doesn't result in the button action being triggered.

    In your case, have you tried using the On Slide Exit event of the slide to trigger the Advanced Action?

    T
    TazzyAuthor
    Known Participant
    August 16, 2016

    Hi Rod - thanks for response.

    Have tried this but still no joy (unless I am doing something wrong).

    Button on timeline as shown below

    Timeline

    Conditional Action set on Slide Exit as shown below

    Menu

    Conditional Action as shown below

    Action  

    T
    TazzyAuthor
    Known Participant
    August 16, 2016

    Forgot to add that the Else Statement on the Conditional Action is :

    • Hide   SmartShape_PlayMenuButton
    • Disable   SmartShape_PlayMenuButton
    • Show SmartShape_PauseMenuButton
    • Enable SmartShape_PauseMenuButton
    • Continue
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices