• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Javascript - rozmiar okna

Aruba Cloud - Virtual Private Server VPS
0 głosów
214 wizyt
pytanie zadane 20 czerwca 2023 w JavaScript przez MacieKap Bywalec (2,400 p.)
<!DOCTYPE html>
<html lang="PL">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parallax sscrolling effect</title>
    <style>
        body{
    margin: 0;
    padding: 0;
}
#logo{
    background-image: url(scooter.webp);
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;

}
#logo::after{
    content: " ";
    background-color: rgba(0, 0, 0, 0.35);
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}
#logo2{
    height: 1080px;
    width: 1920px;
}
    </style>
</head>
<body>
    <div id="container">
    <div id="logo">
        <div id="logo2">Scooter</div>
    </div>
    </div>
    <script>
        var w = window.innerWidth;
        var h = windows.innerHeight;

        document.getElementById("container").style.width = w;
        document.getElementById("container").style.height = h;
    </script>
</body>
</html>

Witam,

chciałbym, aby ten skrypt (dół dokumentu) ustawiał #container na te same rozmiary co rozmiar dostępnego miejsca w oknie przeglądarki. Ale niestety nie działa, jest w stanie ktoś pomóc?

Z góry dziękuje za wszystkie odpowiedzi,

2 odpowiedzi

+1 głos
odpowiedź 20 czerwca 2023 przez Comandeer Guru (606,590 p.)

Polecam używać konsoli w przeglądarce. Wówczas dostałbyś informację o błędzie w kodzie – masz windows w zmiennej h zamiast window. Drugi błąd jest związany z niedodawaniem jednostki, nie da się przypisać samej liczby do stylów elementu, musi być jednostka. Musisz zatem dodać do window.innerWidth i window.innerHeight ciąg 'px'.

Aczkolwiek wydaje mi się, że spokojnie możesz tutaj użyć jednostek vw i vh i wgl zrezygnować ze skryptu JS, po prostu ustawiając temu elementowi width na 100vw i height na 100vh w CSS-ie.

komentarz 20 czerwca 2023 przez MacieKap Bywalec (2,400 p.)
Ok, poprawiłem ten skrypt, ale div dalej jest delikatnie za szeroki.
komentarz 20 czerwca 2023 przez infinityhost Użytkownik (780 p.)
Tak, w teorii, bo potem się pojawia scrollbar i to co na początku oczywiste już potem takie nie jest. No i ms edge, gdzi po prawiej stronie pojawił się dodatkowy pasek i window.innerWidth już nie jest widnow.innerWidht.

Po pierwsze zrób tak, dodaj do document.body element DIV.

Potem popatrz na właściwości okna masz na w3schools może 10 parametrów okno, innerWidth,clientWidth, offsetWidth itp. i wyświetl sobie je wszystkie w tym divie.

Potem wyświetl w div te parametry swojego #conainer.

I jeszcze masz w CSS chyba taki parametr wyswietlania typu "flex" "align-content:stretch".
komentarz 20 czerwca 2023 przez Comandeer Guru (606,590 p.)

@MacieKap, jeśli chcesz mieć element na cały ekran, to wystarczy mu ustawić 100vh wysokości, a na szerokość div z automatu przyjmuje 100%. Jeśli nie sięga krawędzi, to prawdopodobnie trzeba usunąć marginesy i paddingi z body → https://codepen.io/Comandeer/pen/gOQMQJE

komentarz 20 czerwca 2023 przez VBService Ekspert (256,600 p.)

@infinityhost, 

window.innerWidth już nie jest widnow.innerWidht

window.innerWidth zawsze jest window.innerWidth,

No i ms edge, gdzi po prawiej stronie pojawił się dodatkowy pasek

będąc bardziej precyzyjnym, chodziło chyba Tobie, że wartość się zmieni dla window.innerWidth

0 głosów
odpowiedź 20 czerwca 2023 przez VBService Ekspert (256,600 p.)
edycja 20 czerwca 2023 przez VBService

Do tego co napisał @Comandeer; zmień wartości dla #logo2

      #logo2{
        height: 100%; /* 1080px; */
        width: 100%; /* 1920px; */
      }

dla

     <div id="logo">
       <div id="logo2">Scooter</div>
     </div>
      #logo{        
        ...
        width: 100%;
        height: 100vh;
        position: relative;
      }

[ on-line ]

komentarz 20 czerwca 2023 przez infinityhost Użytkownik (780 p.)
A to nie powinno być 100.00% ?
komentarz 20 czerwca 2023 przez VBService Ekspert (256,600 p.)
edycja 21 czerwca 2023 przez VBService

AFAIK  obydwa są prawidłowo interpretowane przez css.


BTW, Zapis z kropką dziesiętną raczej jest stosowany np. m. in. przy wartościach używanych dla animacji css.

CSS data type represents a percentage value ]

The <percentage> data type consists of a <number> followed by the percentage sign (%) ]

Podobne pytania

+1 głos
3 odpowiedzi 1,012 wizyt
pytanie zadane 7 lipca 2020 w HTML i CSS przez lujasjeden Użytkownik (860 p.)
0 głosów
1 odpowiedź 170 wizyt
0 głosów
1 odpowiedź 4,858 wizyt
pytanie zadane 26 lutego 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)

93,332 zapytań

142,324 odpowiedzi

322,400 komentarzy

62,668 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...