Full screen in html5

Community Beginner ,
Jan 31, 2017

Copy link to clipboard

Copied

Hi,

I created a responsive project, but I would like the desktop view to be full screen.  Is that possible?

Cheers!

Views

2.4K

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Employee ,
Feb 01, 2017

Copy link to clipboard

Copied

Hi,

In case of responsive project, the published output adjust as per the browser size.

If you are not able to get the responsive HTML5 output correctly in browser, please reply with the screenshot, so that We can have more details regarding the issue.

Also, please mention the version of Adobe Captivate, if it is version 8  or version 9.

 

Regards,

Deep

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Mar 02, 2017

Copy link to clipboard

Copied

Hi Deep,

I'm using Captivate 9.  Here's a screenshot:

thanks!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Feb 01, 2017

Copy link to clipboard

Copied

I created a solution for this some time ago... I no longer have access to all the files but essentially you can run this JS to toggle HTML Fullscreen mode:

  if (

      document.fullscreenEnabled || 

      document.webkitFullscreenEnabled || 

      document.mozFullScreenEnabled ||

      document.msFullscreenEnabled

  ) {

    var i = document.getElementById("main_container")

    if (

        document.fullscreenElement ||

        document.webkitFullscreenElement ||

        document.mozFullScreenElement ||

        document.msFullscreenElement

    ) {

      if (document.exitFullscreen) {

          document.exitFullscreen();

      } else if (document.webkitExitFullscreen) {

          document.webkitExitFullscreen();

      } else if (document.mozCancelFullScreen) {

          document.mozCancelFullScreen();

      } else if (document.msExitFullscreen) {

          document.msExitFullscreen();

      }

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Mar 02, 2017

Copy link to clipboard

Copied

Hi there,,

where should I put this js, in the head tag of my index page?  It shows promise, but my lack of scripting skills is preventing it from working.

Thanks!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Mar 03, 2017

Copy link to clipboard

Copied

You will need to add it to a button that the learner will use to toggle fullscreen on/off.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Mar 03, 2017

Copy link to clipboard

Copied

hmmmmm . . . did that . . . doesn't work. What am I doing wrong?  Will I be able to see it work in preview?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Mar 20, 2018

Copy link to clipboard

Copied

I tried this today and it did not work for me either. I'm using Captivate 9, publishing to a SCORM 1.2 zip file, and importing into a Moodle-based LMS (Totara). The file is presented in a box that just isn't wide enough for the file (thus needed to go full screen). Maybe it's a Moodle thing?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Mar 20, 2018

Copy link to clipboard

Copied

Hi all, as I mentioned I was kind of doing that from memory. I just tried this successfully in CP2017

  if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {        var i = document.getElementById("main_container")        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {            // exit full-screen           if (i.exitFullscreen) {               document.exitFullscreen();           } else if (document.webkitExitFullscreen) {               document.webkitExitFullscreen();           } else if (document.mozCancelFullScreen) {               document.mozCancelFullScreen();           } else if (document.msExitFullscreen) {               document.msExitFullscreen();           }       } else {           if (i.requestFullscreen) {               i.requestFullscreen();           } else if (i.webkitRequestFullscreen) {               i.webkitRequestFullscreen();           } else if (i.mozRequestFullScreen) {               i.mozRequestFullScreen();           } else if (i.msRequestFullscreen) {               i.msRequestFullscreen();           }       }   }

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Jul 16, 2018

Copy link to clipboard

Copied

Hi this.onEnterFrame,

I'm still using Captivate 9. I tried your code above on a button--put this in Script Window for Execute Java Action and it didn't work.  Any idea what I could be doing wrong?  Thanks!

if (document.fullscreenEnabled ||

document.webkitFullscreenEnabled ||

document.mozFullScreenEnabled ||

document.msFullscreenEnabled

) {       

var i = document.getElementById("main_container")       

if (document.fullscreenElement ||

document.webkitFullscreenElement ||

document.mozFullScreenElement ||

document.msFullscreenElement)

{            // exit full-screen          

if (i.exitFullscreen)

{               document.exitFullscreen();          

}

else if (document.webkitExitFullscreen)

{              

document.webkitExitFullscreen();         

} else if (document.mozCancelFullScreen) {             

document.mozCancelFullScreen();          

} else if (document.msExitFullscreen) {              

document.msExitFullscreen();          

}      

} else {         

if (i.requestFullscreen) {            

  i.requestFullscreen();          

} else if (i.webkitRequestFullscreen) {             

i.webkitRequestFullscreen();          

} else if (i.mozRequestFullScreen) {              

i.mozRequestFullScreen();         

} else if (i.msRequestFullscreen) {             

i.msRequestFullscreen();          

}     

}  

}

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Jun 05, 2019

Copy link to clipboard

Copied

hi..did you ever get that problem fixed for fullscreen ?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Jun 06, 2019

Copy link to clipboard

Copied

nope.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Jul 17, 2019

Copy link to clipboard

Copied

Must remove line <meta http-equiv="x-ua-compatible" content="IE=10"> from index.html for"msRequestFullscreen" to work in IE11

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Zoey2005 AUTHOR
Community Beginner ,
Nov 06, 2019

Copy link to clipboard

Copied

Thanks thomasc, it did work to remove the line. And yes, it does go full screen--but it's the browser that goes full screen—my project stays the same size. I was hoping to have my captivate project go full screen. I guess my only solution is that I should have created the project as scaleable.

 

Thanks for your help!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Jun 06, 2019

Copy link to clipboard

Copied

I'm currently trying to figure that one out, I know how to do a non-responsive blank project full scale in a browser. Those settings when publishing a project are not the same when is a responsive project file...that's where the trick lies. Hopefully there's away and is just located in another section? In the top menu ribbon > under modify there's the option to retain ratio when rescaling but that's where my search stop...tomorrow is another day to continue this hunt!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jun 07, 2019

Copy link to clipboard

Copied

Maybe only my personal logic, but I asking to have a responsive project going full screen seems contradictory with the concept of a responsive project.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 07, 2019

Copy link to clipboard

Copied

There is no default option in the HTML5 publish settings in Captivate to turn off browser chrome and make the content fully Full-Screen.

The Scalable HTML setting is only intended to make the content fill the available browser space INSIDE the chrome, not designed to force a full-screen mode.  Hitting F11 when viewing content in a desktop computer gets you closer toward full-screen but still keeps at least enough control elements to allow the user to close the window if they so desire.

Some browsers have the option of displaying content in what is known as 'Kiosk Mode' where all browser chrome is disabled.  But to get that you usually need to launch the window FROM another window using JavaScript to control the window properties.  Captivate doesn't give this option, so you would need to work out the JavaScript yourself.

However, even if you DID manage to crack that code, this doesn't mean you will have the same result when you launch the content from an LMS because the LMS controls the link that launches the window.  Additionally, since HTML5 output (especially responsive HTML5 output) is mainly designed for mobile devices, their browsers also behave somewhat differently due to the smaller available screen real estate.

So it's quite a mixed bag of choices and obstacles.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Jun 09, 2019

Copy link to clipboard

Copied

I have 2 sides to this project. 1st is the presentation side that is non responsive as it is viewed on 65" touch screens in the training center. 2nd is the knowledge check and assignments that is done on all other devices which is responsive. So for now i need to play a non responsive project in full screen.. Everything runs through Captivate prime .. Be happy if you could help me get past this one.

TIA

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jun 09, 2019

Copy link to clipboard

Copied

You cannot have one project CPTX with both non-responsive AND responsive slides.

If you want some content to be non-responsive and other parts of the course to be responsive then you'll need to separate them out into different CPTX project files.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Jun 09, 2019

Copy link to clipboard

Copied

I understand yes. They are separate

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Advocate ,
Jun 07, 2019

Copy link to clipboard

Copied

Hi Chessie

I'm new to captivate (more active in the Animate community) and haven't tested this with responsive output from Captivate yet. Nevertheless you could try this:

var elem = document.getElementById("project_container");

var fullscreen = false;

toggleFullscreen = function () {

    if (!fullscreen) {

        if (elem.requestFullscreen) {

            elem.requestFullscreen();

            fullscreen = true;

        } else if (elem.mozRequestFullScreen) {

            elem.mozRequestFullScreen();

            fullscreen = true;

        } else if (elem.webkitRequestFullscreen) {

            elem.webkitRequestFullscreen();

            fullscreen = true;

        } else if (elem.msRequestFullscreen) {

            elem.msRequestFullscreen();

            fullscreen = true;

        }

    } else {

        if (document.exitFullscreen) {

            document.exitFullscreen();

            fullscreen = false;

        } else if (document.mozCancelFullScreen) {

            document.mozCancelFullScreen();

            fullscreen = false;

        } else if (document.webkitExitFullscreen) {

            document.webkitExitFullscreen();

            fullscreen = false;

        } else if (document.msExitFullscreen) {

            document.msExitFullscreen();

            fullscreen = false;

        }

    }

}

toggleFullscreen();

As you can see I'm using a var fullscreen to check what the click on a button should do, either request or exit fullscreen. You know that requestFullscreen can only work if a user has willingly triggered it.

And as element to be fullscreened I'm using the project_container because this seems to be the one with the essential content from Captivate. See this screenshot from my project I'm currently working on with the particular element highlighted through Web Tools / Inspector.

Screenshot 2019-06-07 at 13.09.53.png

Not guaranteed but it might work

Klaus

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Sep 12, 2019

Copy link to clipboard

Copied

Hi Klaus, this works very well for my project. Is there a way to force the project to either center or stretch to fit the screen? In full screen the project is smaller than the screen and in the top left corner. Thanks!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Advocate ,
Jun 07, 2019

Copy link to clipboard

Copied

And additionally

you should consider that the Javascript Fullscreen API doesn't work on iOS.

Klaus

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
Jun 07, 2019

Copy link to clipboard

Copied

OP is talking about a responsive project!  Is that taken into account?

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Explorer ,
Jul 18, 2019

Copy link to clipboard

Copied

Sorry I didn't follow up on this sooner. The issue you are having with my solution is probable due to the different Captivate version and publishing options. This line 

document.getElementById("main_container") 

Is finding the DOM element we want to make fullscreen. In my case CP17 the element's ID when published in "main_container"... But I would not be too suprised if CP9 used a different ID (if not a whole different layout). 

So you may need to figure out what the ID of the element is that you want to go fullscreen. I don't have a CP9 published course handy to look at... I guess you could just make the whole BODY fullscreen but then you would have all the player stuff too.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more