We Keep Coding

Styling included inside 'requestFullscreen' functions work, but inside 'exitFullscreen' functions they don't

Please see my jsfiddle: https://jsfiddle.net/vL56gboa/1/. I have a problem where I can change the zoom of my highest level div when I enter full screen mode, but I cannot change it back when I exit full screen. I have tried variations of 'document.' and 'element.', and tried using no zoom value with '1' set in css, for it to revert back to, and also tried setting value to 1 directly, but to no avail. I am using chrome and am wondering if the failure is because pressing escape does not call the function to exit full screen, but rather it escapes in another way. I also tried adding a zoom change on click of key 27 (esc key) function and this didn't work either. I would prefer not to use this method anyway as on some machines maybe it wont be the escape key which will be used for exiting full screen. Can anyone see a problem with my exit function that would prevent the element style change from happening?
<div id="wrapper">
<div id="clickThis" onClick="openFullscreen()"></div>
</div>
#wrapper {
width: 500px;
min-height: 300px;
max-height: 300px;
background-color: red;
}
#clickThis {
background-color: green;
min-width: 100px;
min-height: 100px;
max-width: 100px;
}
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
let calcZoom = (window.screen.height / 300) * .98;
document.getElementById("wrapper").style.zoom = calcZoom;
}
/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
document.getElementById("wrapper").style.zoom = "";
}

After much searching I finally found the answer to this. It turns out Chrome does not fire an event key when you press escape in full screen mode. The below code from 'photicSphere' at this link Capture ESC event when exiting full screen mode worked a treat.
document.addEventListener('fullscreenchange', exitHandler);
document.addEventListener('webkitfullscreenchange', exitHandler);
document.addEventListener('mozfullscreenchange', exitHandler);
document.addEventListener('MSFullscreenChange', exitHandler);
function exitHandler() {
if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
///fire your event
}
}

Enter and exit fullscreen in browser using javascript

I'm working with chrome and I want a simple task. exiting fullscreen using code, not F11 key press.
Here are some documentations about how to implement it:
https://www.w3schools.com/jsref/met_element_exitfullscreen.asp
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
None of the above methods work. And also lots of non-working answers on Stackoverflow. Please help I really need to solve this.
Here is CodePen.
Here is the code I'm trying:
const button = document.getElementById('exitId');
button.addEventListener("click", function(){
// Javascript Code To Exit Fullscreen Goes Here
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
});
<button id="exitId">Exit Fullscreen</button>

A simple function to toggle fullscreen in JavaScript. It work well on Firefox and Webkit browsers.
JavaScript Function
/**
* Toggle fullscreen function who work with webkit and firefox.
* #function toggleFullscreen
* #param {Object} event
*/
function toggleFullscreen(event) {
var element = document.body;
if (event instanceof HTMLElement) {
element = event;
}
var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function() {
return false;
};
document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function() {
return false;
};
isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}
<button onclick="toggleFullscreen();">Full Screen</button>

Note that in order to exit full screen using javascript - you have to also enter the fullscreen mode using javascript. If fullscreen was based on F11 - it will not be possible to exit it using javascript.
The reason is that when you enter fullscreen using javascript you actually moving specific part of your document into fullscreen (and not the entire application), while when you are in application-full screen mode - the entire application is in fullscreen.
If you are in fullscreen (application-wise) you still see other tabs. If you are in document/element fullscreen mode - there are no tabs/url/bookmarks bar etc.
Check the following code:
<div id="container">
<button id="toggle">Toggle Fullscreen</button>
</div>
====
button.addEventListener("click", function() {
if (document.fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} else {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (container.requestFullscreen) {
container.requestFullscreen();
}
else if (container.mozRequestFullScreen) {
container.mozRequestFullScreen();
}
else if (container.webkitRequestFullScreen) {
container.webkitRequestFullScreen();
}
else if (container.msRequestFullscreen) {
container.msRequestFullscreen();
}
}
}
});
You can see a working solution here: https://jsfiddle.net/zpdwL8gt/4/
Checked on firefox & chrome # MacOS

How can I display the entire web page in fullscreen and disable f11 and ESC buttons?

I'm doing an online quiz with PHP, HTML and Javascript. When the user clicks the "Start Quiz" button, the page must be shown in fullscreen, and the f11 and ESC buttons must be disabled to prevent users from exiting the fullscreen mode. How can I do that?
Here is the code for the fullscreen mode:
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}

In a regular browser setting this is usually not possible due to the security implications.
You can use things like electron though: With electron you can create an application with "kiosk" mode, which basically does that.

Javascript to show cursor when window is not full width

I want to hide cursor when my window get full width and once I click on esc key button my mouse cursor start appearing.
I am using following code to show/ hide cursor and to show window full width.
function toggleFullScreen(elem) {
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
document.body.style.cursor = 'none'; // to hide cursor
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
document.body.style.cursor = 'none'; // to hide cursor
}
} else{
document.body.style.cursor = 'default'; // to show cursor
console.log('test');
}
}
HTML:
<body oncontextmenu="return false;" onkeydown="return false;" onmousedown="return false;" onclick="toggleFullScreen(document.body)">
</body>
CSS:
body {
BACKGROUND: #000080;
color: #fff;
font-family: 'Yantramanav', sans-serif;
margin: 0 auto;
width: 100%;
padding: 0;
overflow:hidden;
}

The best way to do this would be to hook onto the fullscreenchange event, then check the document.fullscreenElement.
The basic idea is that checkFullscreen will run no matter how the user gets into or out of fullscreen mode, so this will allow you to hide/show the cursor whenever that changes.
There are a few ways of hooking into events, but I'll stick with the method you're using in your code already, for simplicity.
<body onclick="toggleFullScreen(document.body)" onfullscreenchange="checkFullscreen"></body>
function toggleFullscreen(elem) { // simplified
if (document.fullscreenElement) {
elem.requestFullscreen();
}
else {
document.exitFullscreen(); // changed
}
}
function checkFullscreen() { // added
if (document.fullScreenElement) {
document.body.style.cursor = 'none';
}
else {
document.body.style.cursor = 'default';
}
}
You'll have to add in the browser prefix stuff, but this should point you in the right direction. You can find out more on the MDN page for fullscreen mode.

ExitFullScreen not working + anyway to keyboard press on button click?

My Browser: Google Chrome Version 33.0.1750.154 m
Script:
function exitFullscreen() {
var element = document.documentElement;
if (element.mozCancelFullScreen) {
element.mozCancelFullScreen();
} else if (element.webkitExitFullScreen) {
element.webkitExitFullScreen();
} else if (elem.exitFullScreen) {
element.exitFullScreen();
} else if (elem.msExitFullScreen) {
element.msExitFullScreen();
}
}
HTML:
<div class="menubutton" style="width: 100px;" onclick="exitFullscreen();">
<span class="menubuttontext">EXIT FULLSCREEN</span>
</div>
but when I press that div in fullscren mode nothing happens, did I do a typo, wrote the code totally wrong or is it not possible?
Alternate Soultion? If that div button onclick can trigger a keyboard press escape key it can exit fullscreen too, or is this not possible?

There is a typo in (though it won't solve the issue)
} else if (elem.exitFullScreen) { // should be element
element.exitFullScreen();
} else if (elem.msExitFullScreen) {
element.msExitFullScreen();
}
But the exitFullscreen should be called on document object only
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
DEMO