Menu
I have the following javascript that is triggered by a button in my HTML:
function toggleFullScreen(){
if(v.requestFullScreen){
v.requestFullScreen();
}
else if(v.webkitRequestFullScreen){
v.webkitRequestFullScreen();
}
else if(v.mozRequestFullScreen){
v.mozRequestFullScreen();
}
}
How can I extend this JS code to incorporate the ability to exit fullscreen? What are the best practices for this?
490
There is actually a fully functional example on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Toggling_fullscreen_mode
Quote:
Toggling fullscreen mode
This code is called when the user hits the Enter key, as seen above.
function toggleFullScreen() { if (!document.fullscreenElement && // alternative standard method !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods if (document.documentElement.requestFullscreen) { document.documentElement.requestFullscreen(); } else if (document.documentElement.msRequestFullscreen) { document.documentElement.msRequestFullscreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullscreen) { document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } }This starts by looking at the value of the fullscreenElement attribute on the document (checking it prefixed with both moz, ms, and webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling either element.mozRequestFullScreen() msRequestFullscreen()or webkitRequestFullscreen(), depending on which is available.
If fullscreen mode is already active (fullscreenElement is non-null), we call document.mozCancelFullScreen(), msExitFullscreen or webkitExitFullscreen(), again depending on which browser is in use.
89
Have you try something from this ?
exitFullscreen();
mozCancelFullScreen();
webkitExitFullscreen();
msExitFullscreen();
Look there :
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
or:
http://blog.pearce.org.nz/2011/11/firefoxs-html-full-screen-api-enabled.html
Is this enough helpful for you ?
40
<head>...</head>
<body> ex. mainBodyPlace the function before the closing body tag ie. </body>
<script src="js/jquery.js"></script>
<script src="js/screenfull.min.js"></script>
</head>
<body id="mainBody">
<!--[whatever]-->
<script>
$(function tScreen()
{
if(!screenfull.enabled)
{ return false; }
screenfull.request(document.getElementById('mainBody'));
});
$('#toggle').click(function ()
{ screenfull.toggle($('#mainBody')[0]);});
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
