Highlighted

Full screen in html5

New Here ,
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.3K

Likes

Translate

Translate

Report

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

Full screen in html5

New Here ,
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.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 31, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 0
New Here ,
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 01, 2017 0
New Here ,
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 02, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2017 0
New Here ,
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 03, 2017 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 20, 2018 0
New Here ,
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2018 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 05, 2019 0
New Here ,
Jun 06, 2019

Copy link to clipboard

Copied

nope.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 06, 2019 0
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 17, 2019 0
New Here ,
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
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 06, 2019 0