Display Div content in fullscreen window

Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
PloMar
Posts: 48

Display Div content in fullscreen window

Hello,
Is it possible to display the content of a Div in full screen window with JavaScript?
Admin Posts: 805
Hi,
There is fullscreen API in JavaScript, you can use the requestFullscreen() method to display a HTML element in full screen mode, documentation: Using fullscreen mode.
- Fullscreen requests need to be called from within an event handler generated by the user (like "click").
Example:

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>
Demo:
Click on the button, will display the content of this Div in fullscreen:
https://coursesweb.net/

Similar Topics