HTML :
<button id="go-button">Enable Full Screen</button>
<div id="element">
< /div>
CSS :
body {
margin: 0;
}
#element {
margin: 40px auto 20px auto;
height: 200px;
width: 400px;
background-color: #e9e9e9;
font-size: 20px;
padding: 40px 0 0 0;
text-align: center;
box-sizing: border-box;
}
#go-button {
width: 200px;
display: block;
margin: 50px auto 0 auto;
}
/* webkit requires explicit width, height = 100% of sceeen */
/* webkit also takes margin into account in full screen also - so margin should be removed (otherwise black areas will be seen) */
#element:-webkit-full-screen {
width: 100%;
height: 100%;
background-color: pink;
margin: 0;
}
#element:-moz-full-screen {
background-color: pink;
margin: 0;
}
#element:-ms-fullscreen {
background-color: pink;
margin: 0;
}
/* W3C proposal that will eventually come in all browsers */
#element:fullscreen {
background-color: pink;
margin: 0;
}
JS :
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
/* Get out of full screen */
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
/* Is currently in full screen or not */
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
// If no element is in full-screen
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
});
No comments:
Post a Comment