In my web application I have a button to allow the users to work on full-screen mode. My problem is that it's only working for the current page, if we click a link or in any other way change pages or even if we refresh the current one the full-screen mode is lost.
this is the function I'm using to allow the full-screen:
// Handle full screen mode toggle
var handleFullScreenMode = function () {
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && !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();
}
}
}
$('#trigger_fullscreen').click(function () {
toggleFullScreen();
});
}
$(document).ready(function () {
handleFullScreenMode();
});
Is there anyway to keep the it when changing pages like what happens when you click F11?