How to Window Full Screen In JavaScript

Hello Dev,

Today, i we will show you how to window full screen in javaScript. This article will give you simple example of how to window full screen in javaScript. you will learn how to window full screen in javaScript.

So let’s follow few step to create example of how to window full screen in javaScript.

Example

<!DOCTYPE html>
<html>
<title>How to Window Full Screen In JavaScript - codeplaners</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
#fullscreen {
    margin: 40px auto 20px auto;
    height: 200px;
    width: 600px;
    background-color: #3f51b5;
    font-size: 20px;
    padding: 40px 0 0 0;
    text-align: center;
    box-sizing: border-box;
}
#fullscreen span {
    color: #fff;
    font-family: sans-serif;
}
#full-button {
    width: 200px;
    display: block;
    margin: 50px auto 0 auto;
    padding: 10px;
    background: #ffffff;
}
#fullscreen:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}
#fullscreen:-moz-full-screen {
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}

#fullscreen:-ms-fullscreen {
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}
#fullscreen:fullscreen { 
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}

</style>

</head>

<body>
	<div id="fullscreen">
		<span>How to Window Full Screen In JavaScript - codeplaners</span>
		<button id="full-button">Enable Full Screen</button>
	</div>
</body>

<script>

/* Get into full screen */
function GoInFullscreen(fullscreen) {
	if(fullscreen.requestFullscreen)
		fullscreen.requestFullscreen();
	else if(fullscreen.mozRequestFullScreen)
		fullscreen.mozRequestFullScreen();
	else if(fullscreen.webkitRequestFullscreen)
		fullscreen.webkitRequestFullscreen();
	else if(fullscreen.msRequestFullscreen)
		fullscreen.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_fullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
	
	// If no fullscreen is in full-screen
	if(full_screen_fullscreen === null)
		return false;
	else
		return true;
}

$("#full-button").on('click', function() {
	if(IsFullScreenCurrently())
		GoOutFullscreen();
	else
		GoInFullscreen($("#fullscreen").get(0));
});

$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
	if(IsFullScreenCurrently()) {
		$("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
		$("#full-button").text('Disable Full Screen');
	}
	else {
		$("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
		$("#full-button").text('Enable Full Screen');
	}
});

</script>
</html>

Example

Recommended Posts

Random Post