1

I made an element take full screen by using the below method:

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;
}

It works well but I want to show another element when on the fullscreen mode.

The other element has position: fixed and z-index: 999999999 but it's not visible when on fullscreen mode.

Could anyone help me, please?

Below is the link to the example

https://stackblitz.com/edit/web-platform-z1phjd?file=index.html

So I want to show the blue element when the red element is full screen sized.

critrange
  • 5,652
  • 2
  • 16
  • 47

5 Answers5

5

It seems it was once possible to solve this issue with z-index but its since been patched by newer browser releases - See this thread

I believe Tushar Vaghela's answer is your best chance of achieving your desired result, which is to include the elements you wish to overlay within the fullscreened element - See this thread.

JStanton
  • 425
  • 5
  • 12
1

Maybe a div surrounding all the fullscreen elements will work and then you can position the elements inside as you wish. See fiddle: https://jsfiddle.net/840urcsf/6/

The snippet doesn't enable the fullscreen, but here it goes:

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

  btn.addEventListener("click", () => {
    const element = document.querySelector(".fullscreen-container");
    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;
    }
  });
})();
body {
  background: orange;
}

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

.other-element {
  width: 100px;
  height: 100px;
  padding: 24px;
  background: blue;
  position: fixed;
  top: 60px;
  left: 60px;
  color: white;
}
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="fullscreen-container">
      <div class="fullscreen-element">
          <button class="make-fullscreen">Fullscreen</button>
      </div>
    <div class="other-element">
          other element
      </div>
      </div>
    <script src="script.js"></script>
</body>

</html>
cicb
  • 94
  • 9
1

Here is jsfiddle demo, You can do it through dom manipulation by listening to fullscreenchange event and following these steps:

1-add the other-element element as child of fullscreen-element in full screen mode.

2-bring other-element back to its original location in the normal mode.

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

  element.addEventListener("fullscreenchange", event => {
    if (document.fullscreenElement) {
      element.appendChild(other);
    } else {
      element.parentNode.insertBefore(other,element.nextSibling)
    }
  });

  btn.addEventListener("click", () => {
    if (element.requestFullscreen) {
      element.requestFullscreen().catch(err => {
        console.log(err);
      });
  });
})();
Alan Omar
  • 4,023
  • 1
  • 9
  • 20
0

The full screen works here: https://jsfiddle.net/trentHarlem/7861L0ph/

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

  btn.addEventListener('click', (event) => {
    //event.preventDefault();
    if (document.fullscreenElement) {
    

      document.exitFullscreen();
    } else {
      element.requestFullscreen();
    
    }
  });
})();
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;
}
 <div class="fullscreen-element">
      <button class="make-fullscreen">TOGGLE Fullscreen</button>
      <div class="other-element">other element</div>
    </div>
trentHarlem
  • 99
  • 10
  • Actually, it's nothing different from mine. It looks like it just toggles the visibility of the blue element. I need the blue element to be shown on the full screen. – critrange Feb 20 '21 at 10:53
  • Would you Please clarify which elements blue /red that you want to see on full screen and not full screen. I can already see both so i assumed you wanted a toggle – trentHarlem Feb 20 '21 at 13:13
  • i updated my attempt but I'm still not certain what you are looking for. I do notice that the full screen functionality doesn't always work properly from code editors. so i'm using vs code. JS fiddle seems less quirky so i included a link – trentHarlem Feb 20 '21 at 13:45
0

how about simply move "other-element" to inside "fullscreen-element"? And change "fullscreen-element" position to relative.

(() => {
  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;
    }
  });
})();
body {
  background: orange;
}

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

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

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

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

        <div class="other-element">
        other element
      </div>
    </div>

    <script src="script.js"></script>
</body>

</html>
Mustafa Şamdan
  • 11
  • 2