We Keep Coding

Javascript fullscreen closes on changing page

I have a button that helps me to open a page in full screen. But when I leave the page the script closes the fullscreen.
Does someone know how I can stay fullscreen when I go to another page?
Here is my full script:
<script type="text/javascript">
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>

It cannot be done.
From - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
In addition, navigating to another page, changing tabs, or switching
to another application (using, for example, Alt-Tab) while in
fullscreen mode exits fullscreen mode as well.
Update -
F11 - makes browser into full screen mode which does not utilize Fullscreen API

js fullscreen toggle button goes to fullscreen but won't exit it

I have this function tied to an onclick event of a button. It should check to see if the documentElement it should toggle full screen mode and swap the button image.
function toggleFS() {
var fsmode = (document.fullScreenElement && document.fullScreenElement !== null) || // alternative standard method
(document.mozFullScreen || document.webkitIsFullScreen);
var page = document.documentElement;
if(!fsmode) {
if(page.requestFullscreen) {
page.requestFullscreen();
} else if (page.mozRequestFullScreen) {
page.mozRequestFullScreen();
} else if (page.webkitRequestFullScreen) {
page.webkitRequestFullScreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
if (page.exitFullscreen) {
page.exitFullscreen();
} else if (page.msExitFullscreen) {
page.msExitFullscreen();
} else if (page.mozCancelFullScreen) {
page.mozCancelFullScreen();
} else if (page.webkitExitFullscreen) {
page.webkitExitFullscreen();
}
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
On the first click after page load, it works correctly and puts the page in fullscreen and switches the button to the exit fullscreen image.
On the second click, it replaces the image for the button but does not exit fullscreen. (Hitting 'ESC' still works.)
Any following clicks do nothing at all. So it is stuck in fullscreen with the go to fullscreen button.
This behavior is in Chrome 56.
Can anyone see where I've gone wrong here?

The functions to request full screen, such as webkitRequestFullScreen, are on document.documentElement, but the ones to exit full screen, such as webkitExitFullscreen, are just on document. The snippet below works properly on Chrome, Edge, and IE.
document.getElementById("toggle-fs").addEventListener("click", function() {
toggleFS()
});
function isFullScreen() {
return (document.fullScreenElement && document.fullScreenElement !== null) ||
(document.msFullscreenElement && document.msFullscreenElement !== null) ||
(document.mozFullScreen || document.webkitIsFullScreen);
}
function enterFS() {
var page = document.documentElement
if (page.requestFullscreen) page.requestFullscreen();
else if (page.mozRequestFullScreen) page.mozRequestFullScreen();
else if (page.msRequestFullscreen) page.msRequestFullscreen();
else if (page.webkitRequestFullScreen) page.webkitRequestFullScreen();
}
function exitFS() {
if (document.exitFullScreen) return document.exitFullScreen();
else if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
else if (document.msExitFullscreen) return document.msExitFullscreen();
else if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
}
function toggleFS() {
if (!isFullScreen()) {
enterFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/nofs.png">';
} else {
exitFS();
document.getElementById("toggle-fs").innerHTML = '<img src="/images/fs.png">';
}
}
JsFiddle

Try this one
<button id="toggle-fs" onclick="toggleFullScreen()"><img src="/images/nofs.png"></button>
with...
document.getElementById("toggle-fs").style.display = "block";
Good luck!

Show page scroll only in fullscreen mode

I have following JS which used to make a page fullscreen after clicking on link:
// mozfullscreenerror event handler
function errorHandler() {
alert('mozfullscreenerror');
}
document.documentElement.addEventListener('mozfullscreenerror', errorHandler, false);
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
// keydown event handler
document.addEventListener('keydown', function(e) {
if (e.keyCode == 13 || e.keyCode == 70) { // F or Enter key
toggleFullScreen();
}
}, false);
Is there a way to make page scroll (overflow) be visible only in fullscreen mode, and when user cancel full screen by clicking same link again or by another way, overflow becomes hidden?

You could just use a class to represent "no overflow" or vice versa. And then just work it into your function, like so:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
document.body.className = document.body.className.replace(' no-scroll', '');
...
} else {
document.body.className += " no-scroll";
See this working example using the following method for "toggling" the class to turn scroll "on/off"
// add/remove no scroll class to body
function toggleNoScroll(off) {
// test if already exist:
var a = Array.prototype.indexOf.call(document.body.classList, 'no-scroll') + 1;
// remove if does exist, so as not to double up
document.body.className = document.body.className.replace(' no-scroll', '');
// add only if off IS False OR off is empty & it did not previously exist (thus "toggle")
if (off === false || (off !== true && !a)) document.body.className += " no-scroll";
return document.body.classList;
}
So then I have:
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) {
toggleNoScroll(true);
...
else {
toggleNoScroll(false);

You can add a class to your body element when you run the toggleFullscreen() function like this:
document.body.className += ' ' + 'fullScreened'
then add a css rule like this:
.fullScreened {
overflow:hidden;
}
Let me know if it works :)

Transitioning the browser to fullscreen revert to normal when clicking on a link

I'm building a web based management software, and want to add the option to enlarge it to fullscreen for just having as much space as possible.
To do this I've tried some jquery plugin and the following code
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
The problem is that when I click on any link and the page reloads, it revert to normal mode.
This doesn't happen when clicking F11 on the keyboard.
It's an api's limit or there's a way to perfectly emulate the F11 mode?

Fullscreen API in webkit browser

I am working on a toggle for the JavaScript Fullscreen API. Somehow the exit fullscreen mode (the else statement) in Webkit Browser doesn't work. Can someone hint what is wrong? The code is the example code of the Mozilla Documentation of the fullscreen API.
var toggleFullScreen;
toggleFullScreen = function() {
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreenElement && !document.webkitFullScreenElement)) {
if (document.documentElement.requestFullScreen) {
return document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
return document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
return document.documentElement.webkitRequestFullScreen();
} else {
return console.log("didnt happen");
}
} else {
if (document.cancelFullScreen) {
console.log("Mozilla Proposal cancels Fullscreen");
return document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
console.log("Firefox closes");
return document.mozCancelFullScreen();
// This is the line:
} else if (document.webkitCancelFullScreen) {
console.log("Webkit closes");
return document.webkitCancelFullScreen();
} else {
return console.log("Can't close");
}
}
};

Have a look here http://xme.im/display-fullscreen-website-using-javascript ... This is the page I use when Im referencing fullscreen oriented code... it should help.

Here is a decent article that describes how to do this. It's from 2012, but it seems to work.
https://hacks.mozilla.org/2012/01/using-the-fullscreen-api-in-web-browsers/
Takeaways from the article:
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen({ navigationUI: "hide" });
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen({ navigationUI: "hide" });
}
else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
}
function exitFullscreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
function setOnFullscreenChange(callback){
document.addEventListener("fullscreenchange", function () {
callback();
}, false);
document.addEventListener("mozfullscreenchange", function () {
callback();
}, false);
document.addEventListener("webkitfullscreenchange", function () {
callback();
}, false);
document.addEventListener("msfullscreenchange", function () {
callback();
}, false);
}
Note that modern versions of firefox do not require the moz prefix.
Also (not from article) to check if fullscreen is enabled
function getIsFullscreenEnabled(){
return document.fullscreenEnabled
|| document.webkitFullscreenEnabled;
} // checks if the browser supports fullscreen
function getIsBrowserInFullscreen(){
return document.fullscreenElement != null
|| document.webkitFullscreenElement != null;
} //checks if browser is currently in fullscreen mode. Note that document.fullscreen is deprecated