Skip to main content
Inspiring
January 31, 2017
Question

Full screen in html5

  • January 31, 2017
  • 9 replies
  • 4625 views

Hi,

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

Cheers!

    This topic has been closed for replies.

    9 replies

    Inspiring
    July 18, 2019

    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.

    Zoey2005Author
    Inspiring
    November 6, 2019

    How would you make the whole BODY fullscreen? I have just been able to make the browser full screen, not the actual captivate course.

    Thanks!

    kdmemory
    Inspiring
    June 7, 2019

    And additionally

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

    Klaus

    Lilybiri
    Brainiac
    June 7, 2019

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

    kdmemory
    Inspiring
    June 7, 2019

    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.

    Not guaranteed but it might work

    Klaus

    New Participant
    September 12, 2019
    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!
    mr white hat
    New Participant
    June 7, 2019

    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!

    Lilybiri
    Brainiac
    June 7, 2019

    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.

    RodWard
    Community Expert
    June 7, 2019

    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.

    Participating Frequently
    June 6, 2019

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

    Zoey2005Author
    Inspiring
    June 6, 2019

    nope.

    thomasc8498188
    Participating Frequently
    July 17, 2019

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

    Zoey2005Author
    Inspiring
    July 16, 2018

    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();          

    }     

    }  

    }

    Inspiring
    March 20, 2018

    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();           }       }   }
    Inspiring
    February 1, 2017

    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();

          }

    Zoey2005Author
    Inspiring
    March 3, 2017

    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!

    Inspiring
    March 3, 2017

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

    Adobe Employee
    February 1, 2017

    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

    Zoey2005Author
    Inspiring
    March 3, 2017

    Hi Deep,

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

    thanks!