full screen

by trentHarlem

HTML

<div class="fullscreen-element">
      <button class="make-fullscreen">TOGGLE Fullscreen</button>
      <div class="other-element">other element</div>
    </div>

CSS

body {
  background: orange;
}

.fullscreen-element {
  width: 400px;
  height: 400px;
  background: red;
}

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  z-index: 999999999999;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}

/* 
.show {
  display: block;
}
 */

JavaScript

(() => {
  const element = document.querySelector('.fullscreen-element');
  const other = document.querySelector('.other-element');
  const btn = document.querySelector('.make-fullscreen');

/*   element.addEventListener('fullscreenchange', (event) => {
    if (document.fullscreenElement) {
      console.log(
        `Element: ${document.fullscreenElement.id} entered fullscreen mode.`
      );
    } else {
      console.log('Leaving full-screen mode.');
    }
  });
   */
  btn.addEventListener('click', (event) => {
    //event.preventDefault();
    if (document.fullscreenElement) {
      // other.classList.remove('show');
      // escape button keycode 27
      document.exitFullscreen();
    } else {
      element.requestFullscreen();
      //  other.classList.add('show');
    }
  });
})();







/* 
(() => {
  const btn = document.querySelector(".make-fullscreen");

  btn.addEventListener("click", () => {
    const element = document.querySelector(".fullscreen-element");
    console.log(element);
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else {
      return;
    }
  });
})();
 */