How to make a fullscreen window with JavaScript

How to make a fullscreen window with JavaScript

Apr 13, 2019 / CSS / JavaScript /

The Fullscreen API is allows web page or HTML element to viewed in fullscreen mode, and hiding all browser user interface and other applications from the window screen. You can use this API to bring images, videos and other content to a users full attention.

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
	}
	
});

Comments

Mohammad ( Apr 13, 2019 12:48:46 )

Thanks

Would you like to share your thoughts?

Your email address will not be published. Required field are marked*

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno