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!
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
Copy link to clipboard
Copied
Hi Deep,
I'm using Captivate 9. Here's a screenshot:
thanks!
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();
}
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!
Copy link to clipboard
Copied
You will need to add it to a button that the learner will use to toggle fullscreen on/off.
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?
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?
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(); } } }
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();
}
}
}
Copy link to clipboard
Copied
hi..did you ever get that problem fixed for fullscreen ?
Copy link to clipboard
Copied
nope.
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
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!
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!
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.
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.
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
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.
Copy link to clipboard
Copied
I understand yes. They are separate
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.
Not guaranteed but it might work
Klaus
Copy link to clipboard
Copied
Copy link to clipboard
Copied
And additionally
you should consider that the Javascript Fullscreen API doesn't work on iOS.
Klaus
Copy link to clipboard
Copied
OP is talking about a responsive project! Is that taken into account?
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.