requestFullscreen() andere Elemente einblenden

requestFullscreen() andere Elemente einblenden - Druckversion

+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: requestFullscreen() andere Elemente einblenden (/showthread.php?tid=2421)

requestFullscreen() andere Elemente einblenden - minicheffe - 15.06.2023

Hallo,
ich hoffe ich bin hier als Anfänger mit meiner Frage richtig!
Ich baue eine Webseite mit verschiedenen Landkarten. In den Landkarten sind dann in einer gesonderten Box verschiedene Punkte von Interesse aufgeführt.
Nun hat der User die Möglichkeit, über eine checkbox, die Karte in den Fullscreen Modus zu setzten.

Code:
  <div class="map-container">

    <div class="map" id="mapMuseenUndMehr"></div>

    <div class="divTextContainerRight">

      <div class="divText">

        <h2>Museen und mehr</h2>

        <p>Stadt XY hat auch einiges an Kultur zu bieten, besonders bei schlechtem Wetter zu empfehlen.<br>

        <ul id="tourPointsListMuseen">Museen</ul>

        <ul id="tourPointsListTheater">Theater</ul>

      </div> 

    </div>

    <div class="mapOn">

      <label for="mapOn">map on:</label>

      <input type="checkbox" id="mapOn" name="mapOn">

    </div>

  </div>

und der dazugehörige Javascript Code:

Code:
function toggleFullscreen() {

  var checkbox = document.getElementById("mapOn");

  var mapContainer = document.getElementById("mapMuseenUndMehr");

  if (checkbox.checked) {

    console.log("Checkbox gecheckt");

    mapContainer.requestFullscreen(); // Vollbildmodus aktivieren

    checkbox.style.zIndex = 10000;

  } else {

    console.log("Checkbox unchecked");

    if (document.exitFullscreen) {

      document.exitFullscreen(); // Vollbildmodus beenden (kompatibel mit verschiedenen Browsern)

    } else if (document.mozCancelFullScreen) {

      document.mozCancelFullScreen();

    } else if (document.webkitExitFullscreen) {

      document.webkitExitFullscreen();

    } else if (document.msExitFullscreen) {

      document.msExitFullscreen();

    }

  }

}

Mein Problem ist nun, dass im Vollbild alle Elemente in der Map in den Hintergrund rutschen und nicht mehr sichtbar sind.
Wie bekomme ich es hin, dass die Elemente z.B. divTextContainer weiterhin sichtbar bleiben? Über den z-index ist es mir leider nicht gelungen.

Vorweg vielen Dank
Christoph

RE: requestFullscreen() andere Elemente einblenden - AndreasB - 16.06.2023

Hallo @"minicheffe"

Also der Grund weshalb einige Elemente nicht sichtbar sind ist der, dass du den mapContainer in den Vollbild modus setzt und dass dieser in deinem Beispiel keine Kind-Elemente besitzt.
Du musst ein Element in den Vollbildmodus setzen, dass allen Elementen die du anzeigen möchtest übergeordnet ist. Also in deinem Fall zum Beispiel den map-container.

RE: requestFullscreen() andere Elemente einblenden - minicheffe - 16.06.2023

@"AndreasB"

DANKE das war der richtige Hinweis.