Show/Hide Playbar Elements with Advanced Actions & Javascript – Issue Resizing Window

September 2, 2018
Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 21 people
Independent Consultant
4

Show/Hide Playbar Elements with Advanced Actions & Javascript – Issue Resizing Window

Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 21 people
September 2, 2018

I’ve created a responsive project with break points using Captivate 2019.

For navigation, I’m using the default Captivate Playbar, but making the various Playbar elements “visible” or “hidden” on page “enter” using Advanced Actions.  For example, on the Menu Page, I only have the “Exit” element visible. (Window is set to “current” in advanced actions).

After publishing (Publish for Devices) everything works within the various break point views, providing I don’t resize the browser. When I resize, the hidden playbar elements reappear.

However, when I navigate to a different page, the scripts works as planned.

Is there a work around for getting “resize” event to execute the playbar scripts? details are below.

Advance Action Window and JavaScript

Menu and Playbar Before Resizing Browser (only “Exit” button showing)

Menu and Playbar After Resizing (all elements showing)

Comments (4)
2018-09-04 15:38:30
2018-09-04 15:38:30

Jim, once a course is running it needs to keep the same width/height. It would look very weird if suddenly the content of a slide would be stretched to fill the height if you took away the bottom border, which is the name of that ‘white space’. If you take out the playbar for the complete course in the Skin editor, you can take out the borders, or at least decrease the width of that bottom border.   Condlcusion: my answer is NOT possible on runtime.

BTW CP2019 like most versions has some small gems, not documented, not mentioned anywhere. One of them is that when you deactivate the Playbar in the Skin editor, the Borders get deactivated automatically. In previous versions this had to be done manually.

 

Like
(1)
(1)
>
Lieve Weymeis
's comment
2018-09-04 17:32:59
2018-09-04 17:32:59
>
Lieve Weymeis
's comment

Thx Lieve, that’s what I was looking for. Jim

Like
2018-09-04 15:32:56
2018-09-04 15:32:56

Hi Lieve, thanks for the feedback. It seems to make a lot of sense to create your own navigation buttons. Quick question, when you hide the playbar, there is a white space at the bottom of the display where the playbar used to be. Is there a where to remove that? Thx. Jim

Like
2018-09-03 08:07:44
2018-09-03 08:07:44

Jim, I rarely use a default playbar, and will never use it in a Breakpoint views project.  Replacing hem with custom shape buttons, timed for the rest of the project gives you full control over the buttons. You can have much bigger buttons on the lower breakpoints, you can hide and show them as you want. Breakpoint views has not at all the limitations of Fluid Boxes where timing for the rest of the project is impossible.

Like
(1)
Add your comment