Skip to main content
K
Kristen2810
Known Participant
March 20, 2014
Answered

Transparent Playbar in HTML5

  • March 20, 2014
  • 2 replies
  • 1475 views

Hi,

I am working in CP7 on an HTML5 course. I have created custom navigation, so I'm not using the playbar. However, in order to get the Closed Captioning to show up above my custom nav, I turned on the playbar, turned off all of the buttons, and made everything transparent.

Everything looks great if you watch the SWF version on a PC, but if you open the HTML5 version there is a thin, gray vertical bar that shows up in the bottom center area of the project (so it's clearly my transparent playbar).

Has anyone tried this before as a workaround to getting the Closed Captioning to show up higher than normal so it doesn't overlay on your custom nav? And is there anything I could do to remove that thin vertical line? I've tried changing the colors to match the background, but it still shows up in that same gray color.

Thanks,

Kristen

This topic has been closed for replies.
Correct answer TLCMediaDesign

Thanks. However, I'm publishing directly to Adobe Connect from Captivate. So I never publish the files out to my desktop or hard drive.


Test the output on your hard drive until you get it right by using the method I suggested. Then when you have the correct number, edit the HTML5DivStruct.txt file in the location below, You would add the top:240px; to the file in the same place. It would always publish your project the same then. Make a backup file and or just remove the added code when you no longer need it.

C:\Program Files\Adobe\Adobe Captivate 7 x64\Templates\Publish\HTML5DivStruct.txt

2 replies

Lilybiri
Lilybiri
Legend
March 22, 2014

Kristen, why don't you create a custom CC button as well?

http://blog.lilybiri.com/toggle-shape-buttons

I would now replace the advanced by a shared action, can be used in any project.

K
Kristen2810Author
Known Participant
March 22, 2014

I did create a custom CC button using a shape button. However, I need the actual captioning itself to show above my custom buttons (not overlay on top of them). Since you can't move the captioning to a certain place on the screen, I turned on the playbar and made it transparent. When I did this, the captioning displays just above my custom nav. Now, it's no longer hidden when the learner turns on the CC.

The problem is in my HTML5 version. A tiny sliver of that invisible CP playbar is showing itself (even though I have no buttons active). It does not show up in the SWF version.

K
Kristen2810Author
Known Participant
March 22, 2014

Here is a screen shot of it from my phone...see the gray vertical bar at the bottom? That doesn't show up in the swf version of this course...only on the HTML5 version.

TLCMediaDesign
TLCMediaDesign
Inspiring
March 21, 2014

Can you post a screen shot. I just tried what you said and I have no thin bar.

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