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.
Posts: 48

Display Div content in fullscreen window

Is it possible to display the content of a Div in full screen window with JavaScript?

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").

Code: Select all

<!doctype html>
<html lang="en">
<meta charset="utf-8" />
#dv1 {
 width: 100%;
 height: 100%;
 margin: 2px auto;
 background: #f8f9fe;
 border: 2px solid #33f;
 padding: 7px;
 text-align: center;

<div id="dv1">Click on the button, will display the content of this Div in fullscreen:<br/>
<button id="btn1">Full-Screen</button>
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);});
Click on the button, will display the content of this Div in fullscreen:

Similar Topics