JavaScript Maximize Window

This JavaScript code snippet helps you to create a maximum window app. It is a JavaScript function called toggleFullScreen that takes an argument elem. It first checks if the document is not in full screen mode by testing the fullScreenElement, msFullscreenElement, mozFullScreen, and webkitIsFullScreen properties. If any of them is null or false, it means that the document is not in full screen mode. In this case, the function will attempt to request full screen mode by calling requestFullScreen, mozRequestFullScreen, webkitRequestFullScreen, or msRequestFullscreen methods on the elem parameter, depending on which one is available. If the document is already in full screen mode, the function will exit full screen mode by calling cancelFullScreen, mozCancelFullScreen, webkitCancelFullScreen, or msExitFullscreen methods on the document object, depending on which one is available.

How to Create JavaScript Maximize Window

Create the HTML structure for the maximum window as follows:

<p id="text">
  Click the below to toggle full screen
</p>
<input type="button" value="click to toggle fullscreen on the body" onclick="toggleFullScreen(document.body)" />
<input type="button" value="click to toggle fullscreen on the document" onclick="toggleFullScreen(documentElement)" />
<input type="button" value="click to toggle fullscreen on the text" onclick="toggleFullScreen(document.getElementById('text'))" />

Now, style the maximum window using the following CSS styles:

html, body {
  background: white;
  padding: 0;
  margin: 0;
}
.cd__main{
display: block !important;
}

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

Finally, add the following JavaScript function for its functionality:

function toggleFullScreen(elem) {
  if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
    if (elem.requestFullScreen) {
      elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
      elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  } else {
    if (document.cancelFullScreen) {
      document.cancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

That’s all! hopefully, you have successfully created the JavaScript maximize window. If you have any questions or suggestions, feel free to comment below.