How to make a fullscreen window with JavaScript

You can get to full screen mode from two ways. You can have the window simply open full screen by pressing F11 key or set up a button or link that will open the window in full screen.

A full screen is a mode where a document or element is displayed on the entire device screen. The full screen mode best fits with video element, iframe element, slideshow galleries etc

HTML Code

<div id="element_wrapper">
		<label>Learn how to make a fullscreen window with JavaScript</label>
		<button id="button">Enable Full Screen</button>
	</div>

CSS Code

#element_wrapper {
	    margin: auto;
    height: 100%;
    width: 50%;
    background-color: #e2f9d0;
    font-size: 24px;
    text-align: center;
    padding-top: 50px;
}

#button {
	width: 200px;
    display: block;
    margin: 60px auto;
    background: #16425D;
    color: #fff;
    border: 1px solid #16425D;
    padding: 10px;
	cursor: pointer;
}
#element_wrapper:-ms-fullscreen {
	background-color: #e7ffc0;
	margin: 0;
}
#element_wrapper:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background-color: pink;
	margin: 0;
}
#element_wrapper:fullscreen { 
	background-color: #e7ffc0;
	margin: 0;
}
#element_wrapper:-moz-full-screen {
	background-color: #e7ffc0;
	margin: 0;
}

JAVASCRIPT Code

/* Go to full screen */
function Fullscreen(element) {
	if(element.requestFullscreen)
		element.requestFullscreen();
	else if(element.mozRequestFullScreen)
		element.mozRequestFullScreen();
	else if(element.webkitRequestFullscreen)
		element.webkitRequestFullscreen();
	else if(element.msRequestFullscreen)
		element.msRequestFullscreen();
}


$("#button").on('click', function() {
		Fullscreen($("#element_wrapper").get(0));
});

$(document).on('fullscreenchange MSFullscreenChange mozfullscreenchange webkitfullscreenchange', function() {
	var full_screen_element_check = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
	
	if(full_screen_element_check != null){
		$("#button").hide(); // If full screen is enabled
	}else{
		$("#button").show(); // If full screen is disabled
	}
	
});