Elemente im browserseitigen Fullscreen (F11) ausblenden

[Black Pearl]

Hallo ihr Lieben,

ich habe ein Problem (wie vermutlich alle, die sich hier melden) : Ich möchte gern im Fullscreen-Modus einige Elemente ausblenden.

Ich habe mittlerweile eine Möglichkeit gefunden, die aber nur funktioniert, wenn der Fullscreen über einen Klick auf der Seite aufgerufen wird. Da das Vollbild jedoch auch bestehen bleiben muss, wenn eine neue Seite geladen wird, muss ich die Option "F11" im Firefox nutzen. Bei dieser Methode werden die :fullscreen-Befehle im CSS jedoch vollkommen ignoriert.

Getestet habe ich die Vorlagen bislang nur mit der Hintergrundfarbe. Folgende CSS-Möglichkeiten habe ich ohne Erfolg durchprobiert:

Versuch1:
#fullscreen:not(:fullscreen) { background-color:#ff0000; }
#fullscreen:fullscreen { background-color:#00ff00; }

Versuch 2:
#fullscreen:not(:-moz-full-screen) { background-color:#ff0000; }
#fullscreen:fullscreen { background-color:#00ff00; }

Versuch 3:
:fullscreen #fullscreen { background-color:#00ff00; }

Versuch 4:
:-moz-full-screen #fullscreen { background-color:#00ff00; }

All diese Vorschläge gab es auf verschiedenen Seiten, doch keine funktioniert bei "F11". Habt ihr eventuell eine echte Lösung für mich?

Ich danke euch für eure Zeit und Mühe Daniel

[tk]

Hallo,

zur Info: das gleiche Thema gibt es schon bei php.de.

Gruß,
Tobias

[Rolf B]

Hallo Captain,

(1) bad news: :fullscreen gilt nur für die Elemente, die mit dem Fullscreen API in den Fullscreen-Mode versetzt wurden. Wenn Du die Seite mit F11 in den Fullscreen-Mode versetzt, wird das Fullscreen-API nicht verwendet.

(2) Wenn Du herausfinden willst, ob deine Seite im F11-Modus aufgerufen wurde, kannst Du screen.width und screen.height mit window.outerWidth und window.outerHeight vergleichen. Das ist zumindest eine erste Näherung. Wenn das Fenster maximiert ist, könnte das falsch werden. Aber für deine Präsi könnte das hinreichend sein.

F11 im laufenden Betrieb der Seite kannst Du über einen keydown-Handler erkennen.

Alles nicht schön, ich weiß. Das Fullscreen-API hätte den alten Fullscreenmode der Seite berücksichtigen müssen. Statt dessen haben sie sich auf das Herausheben eines Elements beschränkt und nun haben wir zwei Fullscreen-Modi.

Oder ich hab's nicht kapiert. Kann auch sein 😉

Für deine Beamer-Anwendung, die Du bei php.de beschrieben ist, kann ein Element-Fullscreenmodus mit requestFullscreen vielleicht auch hilfreich sein. Allerdings musst Du dann eine Singlepage-Application schreiben, die keinen neuen Seitenabruf macht und nur den Inhalt des gefullscreenten Elements austauscht.

Rolf

[Black Pearl]

Hallo Rolf,

danke für deine ausführliche Antwort. Das Problem mit den zwei verschiedenen Fullscreen-Modi kannte ich nicht, für mich war Fullscreen Fullscreen. 😉 Schade, dass das so verändert wurde und man nun dadurch nicht mehr die reine Webseitenbedienung voraussetzen kann, sondern noch eine Browserbedienung vorgeben muss. Aber es hat ja sicher Gründe dafür gegeben.

Um bis zum Sonntag fertig zu sein werde ich deine Idee mit dem keydown-Handler nutzen. Es muss ja erstmal nicht schön geschrieben sein, sondern vor Ort funktionieren.

Ansonsten werde ich mir auch deine anderen Ideen mal ansehen und später in Ruhe ausprobieren, genauso wie die Hilfen, die ich auf php.de bekommen habe.

Und bevor es auch hier für das Crosspostings eins auf die Mütze gibt: Das habe ich dort schon zur Genüge bekommen. ^^

Danke für deine Hilfe und die tolle Erklärung. :)

Dein Captain Daniel 😉

[Rolf B]

Hallo Black,

heute habe ich von Matthias Scharwies gelernt, dass man den F11-Fullscreenmode über eine @media Query abfragen kann:

@media (display-mode:fullscreen) {
   #fullscreen {
      background-color:#00ff00; 
   }
   #loginControls
   {
      display:none;
   }
}

Rolf

[Matthias Scharwies]

Hallo Rolf!

Hallo Black,

heute habe ich von Matthias Scharwies gelernt, dass man den F11-Fullscreenmode über eine @media Query abfragen kann:

Ich hatte den bestehenden Artikel zur Fullscreen API im Januar 2017 „verbrochen“. Damals ging es irgendwie und die vielen vendor-prefixes waren die Einstiegshürde. Ich hatte mich öfter schon gewundert, dass manchmal F11 und ESC und manchmal nur F11 zum Schließen funktionierte.

tl;dr

Ich habe das Tutorial überarbeitet.

1. Der Unterschied zwischen der Fullscreen API und dem F11-Modus wird anfangs klar erklärt.

2. Die vendor-prefixes sind entschlackt. Zumindest -moz-... ist nicht mehr nötig; nächstes Jahr auch -ms- nicht mehr.

3. Das 1. Bsp. hat eine Warnung in Form einer neuen Vorlage, da man den Vollbildmodus im Frickl nicht testen kann. Der Toogle-Button bietet eine Alternative zum [ESC]. Das kann man evtl. später mal für ne Lightbox verwenden.

4. Die :fullscreen-Pseudoklasse hatte gar keine Seite, jetzt schon.

Zum Kiosksystem überlege ich noch. Ich arbeite parallel an einem One-Pager zum interactive Storytelling, bei dem ich den Fullscreen-Modus einbauen werde. Kiosk verweist auf die alte FAQ-Seite: automatische Präsentation oder Guided Tour?

Ideen und Anregungen sind immer willkommen.

Herzliche Grüße

Matthias Scharwies

[Black Pearl]

Hallo Matthias,

auch dir möchte ich gern für die Hilfe und deine schnelle Beitragsüberarbeitung danken. Leute wie ihr machen es uns weniger Erfahrenen deutlich einfacher, auch schwierigere Projekte anzugehen und dabei viel für die Zukunft zu lernen.

Danke dir und allen helfenden Händen, die die Lernseiten, Foren und sonstigen Hilfen erstellen, überarbeiten und pflegen, um uns Anderen die große Welt des Internets zu erklären und uns damit einzuladen, ein Teil davon zu werden.

Bitte bleib auch du gesund und munter.

Alles Liebe Daniel

[Black Pearl]

Hallo Rolf,

du bist mein absoluter Held! Vielen, vielen Dank für deine Mühe und auch für deine Kontaktaufnahme mit Matthias Scharwies. Das war echt genial und toll von dir.

Ich habe den kleinen Codeschnipsel bereits eingefügt und es funktioniert tadellos! Nun kann der Sonntag starten. 😀

Die heutigen Vorbereitungen liefen schon gut, aber mich hat meine vorübergehende Ersatzlösung nicht zufrieden gestellt. Nun gehe ich mit einem Lächeln ins Bett und sehe dem morgigen Tag vollkommen zufrieden entgegen.

Bleib bitte gesund. Es war mir eine echte Freude :)

Liebe Grüße Daniel

[Rolf B]

Hallo Black Pearl,

der Kontakt ging von Matthias aus, die Heldenkrone gebührt ihm mindestens so wie mir.

Die Wiki-Seite über Media-Queries hatte ich vor einiger Zeit überarbeitet, aber diese Feature Query stand da noch nicht im Wiki und ich hatte sie auch nicht in den Specs gefunden.

Kein Wunder - das ist eine eigene Spec - die für Web App Manifest. Noch nie von gehört. Hätte ich besser mal die Mozilla-Doku gegen das Wiki abgeglichen...

Rolf