[GELÖST] Seitenverhältnis soll Z-Index ändern

[QuackBrick]

Hallo miteinander

Kurz gesagt, ich hab kein Plan von js, und heute schon den ganzen tag nach was passendem gesucht. Leider nichts gefunden.

Ich suche ein script, welches das Seitenverhältnis des Viewport berechnet, und aufgrund dessen, bei unterschreiten eines Wertes den Z-Index ändert.

Also eigentlich so:
Variable a = Viewport Breite
Variable b = Viewport Höhe
Variable c = Z-Index von Element xy

Wenn a:b<1, dann c = 100, sonst - 100.
Wenn a oder b sich ändern, dann erneut prüfen.

Sowas suche ich als JavaScript.
Hat da jemand eine Vorlage in der Trickkiste?

Freundliche Grüsse
QuackBrick

 

[kkapsner]

https://developer.mozilla.org/en-US/docs/Web/API/Window/innerHeight
https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

 

[QuackBrick]

Dachte ich könnte das so machen:

<div id="Warnmeldung">
            <p id="Warnmeldung-1">
                Versetze dein Gerät, oder dessen Viewport, bitte in ein Breitbildformat.
            </p>
        </div>
        
        <script>
            var intViewportHeight = window.innerHeight;
            var intViewportWidth = window.innerWidth;
            var c = intViewportWidth / intViewportHeight;
            function change(){
                if (c <= 1){
                   $("#Warnmeldung").style.zIndex='500';
                }else{ 
                    $("#Warnmeldung").style.zIndex='-500';
                    }
            }
        </script>

Die jquery-3.2.1.min Datei hab ich im Header verlinkt.

Mag aber dennoch nicht funzen, kann mir jemand das korrigieren und erklären woran meines gescheitert ist?

Vielen Dank schon mal.

Greetz Quacki

 

[andreax]

window.innerWidth und innerHeight geben nur die Größe des Browser Fenster zurück

um die weite od breite des Screens festzustellen musst du screen.availWidth und screen.availHeight verwenden.

und ginge das ganze Szenario nicht einfacher mit Mediaqueries?

 

[QuackBrick]

So tut es jetzt

Falls es noch wenn anderes interessiert, so funktioniert es nun

<div id="Warnmeldung" class="Warnung">
            <p id="Warnmeldung-1">
                Versetze dein Gerät, oder dessen Viewport, bitte in ein Breitbildformat. 
            </p>
            <p id="Warnmeldung-2">
                (mindestens 5:4/maximal 22,5:9) 
            </p>
            
        </div>
        <script>
            document.addEventListener("DOMContentLoaded", checkDimensions);
            window.addEventListener('resize', checkDimensions);
            function checkDimensions() {
                    // http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript
                    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
              var ratio = w/h;
              // console.log(ratio); // check your browser console

              if (ratio >= 1.25 & ratio <= 2.5) {
                    // fade out
                document.querySelector('.Warnung').style.zIndex = -500;
                document.querySelector('.Warnung').fadeOut(500);
              }
              else {
                    // fade in
                document.querySelector('.foo').style.zIndex = 500;
              }
            }
        </script>

 

[kkapsner]

Wenn du jQuery einsetzt und nicht Prototype, wird das if eine Fehlermeldung in der Fehlerkonsole werfen...