Web Development and Programming Courses
https://coursesweb.net/forum/
Code: Select all
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<style>
#dv1 {
width: 100%;
height: 100%;
margin: 2px auto;
background: #f8f9fe;
border: 2px solid #33f;
padding: 7px;
text-align: center;
}
</style>
</head>
<body>
<div id="dv1">Click on the button, will display the content of this Div in fullscreen:<br/>
https://coursesweb.net/</div>
<button id="btn1">Full-Screen</button>
<script>
var elem = document.getElementById('dv1');
function fullScreen(elm){
if(elm.requestFullscreen) elm.requestFullscreen();
else if(elm.msRequestFullscreen) elm.msRequestFullscreen();
else if(elm.mozRequestFullScreen) elm.mozRequestFullScreen();
else if(elm.webkitRequestFullscreen) elm.webkitRequestFullscreen();
}
document.getElementById('btn1').addEventListener('click', function(){ fullScreen(elem);});
</script>
</body>
</html>