Inspiring

Question

Full screen in html5

Forum|Forum|8 years ago
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.

T

this.onEnterFrame

Inspiring

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.

Z

Zoey2005Author

Inspiring

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

And additionally

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

Klaus

Lilybiri

Brainiac

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

kdmemory

Inspiring

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

P

pinkishplague

New Participant

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

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

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

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.

R

riegalvn

Participating Frequently

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

Z

Zoey2005Author

Inspiring

nope.

thomasc8498188

Participating Frequently

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

Z

Zoey2005Author

Inspiring

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

}

T

this.onEnterFrame

Inspiring

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

T

this.onEnterFrame

Inspiring

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

Z

Zoey2005Author

Inspiring

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!

T

this.onEnterFrame

Inspiring

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

D

Deep Roy

Adobe Employee

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

Z

Zoey2005Author

Inspiring

Hi Deep,

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

thanks!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded