Diskuze: jQuery .height() vrací špatné hodnoty

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Ondřej Kavan

Člen

Ondřej Kavan:22.11.2017 15:51

Snažím se napsat script, který by nastavil margin elementu podle výšky elementu který je nad ním. Když načtu stránku vše vypadá dobře, ale jakmile se výška horního elementu změní .height() vrací špatnou hodnotu.

$(document).ready(function(){
    setInterval(function(){
        var head = $("#head").height();
        var navSmall = $("#nav").height();
        var height = head + navSmall;
        $(".content").css("margin-top", height);
    }, 10);
    });

Editováno 22.11.2017 15:51

Odpovědět

22.11.2017 15:51

Alexej Haman

Člen

Alexej Haman:22.11.2017 16:39

Zkus sem hodit zdroják celé stránky například na https://codepen.io/ takhle na tom nic špatně nevidím.

Nahoru Odpovědět

22.11.2017 16:39

Honza Bittner

Tvůrce

Honza Bittner:22.11.2017 19:01

Možná chceš spíše

.outerHeight();

Pokud by to nefungovalo, dej někam příklad kódu, aby se to na tom dalo pochopit.

Ale trochu si nejsem jistý, jestli se nesnažíš v JS vyřešit něco, co by vyřešilo správné použití HTML a CSS.

Nahoru Odpovědět

22.11.2017 19:01

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Člen

:22.11.2017 20:41

Spomínam si, že dávnejšie som sa na tomto dobre oklamal... Metóda .outerHeight(true) vracia celkovú výšku elementu, vrátane padding, border a margin. A metóda .css('height', '400px') nastaví výšku len pre content. Ale celková výška ktorú následne vráti .outerHeight(true) bude iná, content + padding + border + margin. Ak mu to nesedí, bude to najskôr v tomto... Ak nie, ešte je jeden možný problém - .height() nemusí vrátiť správnu výšku pre skrytý element. Dokonca ani keď nie je skrytý priamo tento element, ale je skrytý rodičovský element. A v tej súvislosti ma ešte napadá, že ak ide o obrázok, alebo element s vnoreným obrázkom, treba zisťovať jeho výšku až v onload callbacku obrázka. Inak to zasa bude doslova náhodné číslo...

Nahoru Odpovědět

22.11.2017 20:41

Člen

:22.11.2017 20:49

Prečo vlastne v slučke čítaš každých 10 milisekúnd tú výšku? Vyzerá to na dosť nezmyselnú konštrukciu. Čo sa tým snažíš dosiahnuť?

Nahoru Odpovědět

22.11.2017 20:49

Ondřej Kavan

Člen

Ondřej Kavan:22.11.2017 20:50

Pomůže tohle?

<!DOCTYPE html>
<html>
    <head>
        <title>Webový projekt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/w3.css">
        <link rel="stylesheet" href="style.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/script.js"></script>
    </head>

    <body class="w3-sand">
        <!-- hlavička -->
        <div id="head" class="w3-top">
                    <div class="w3-green w3-container height">
            <h1 class="w3-xxxlarge">Skauting</h1>
        </div>
        <div id="navbar" class="w3-bar w3-gray w3-container w3-mobile">
            <div>
                <a href="#"><button class="w3-bar-item w3-hover-green w3-button menu-button">Domovská stránka</button></a>
                <a href="#"><button class="w3-bar-item w3-hover-green w3-button menu-button w3-hide-small">Skauting</button></a>
                <a href="#"><button class="w3-bar-item w3-hover-green w3-button menu-button w3-hide-small">Já a skauting</button></a>
                <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="navigation()">&#9776;</a>
            </div>
        </div>
        <div id="nav" class="w3-bar-block w3-gray w3-container w3-hide w3-hide-large w3-hide-medium">
        <a href="#"><button class="w3-bar-item w3-hover-green w3-button menu-button">Skauting</button></a>
        <a href="#"><button class="w3-bar-item w3-hover-green w3-button menu-button">Já a skauting</button></a>
        </div>
                </div>

        <!-- /hlavička -->
        <div class="w3-container content">
        <!-- obsah stránky -->
        <div class="w3-container article">
        <h1 class="w3-panel">Skauting</h1>
        <p>Tento projekt slouží k naučení se html, css, a W3.CSS</p>
            <!--<div class="w3-panel w3-pale-yellow w3-leftbar w3-rightbar w3-border-yellow w3-serif w3-large" style="width: 50%; min-width: 150px;">
            <p style="margin: 25px">Myslíš, že se mi to daří?</p>
            </div>-->
        </div>
        </div>
        <!-- /obsah stránky -->
    <footer class="w3-bottom w3-green">
      <p>&copy 2017-2018 <span class="w3-right">Ondřej Kavan</span></p>
    </footer>
    </body>
</html>

Nahoru Odpovědět

22.11.2017 20:50

Ondřej Kavan

Člen

Ondřej Kavan:22.11.2017 20:52

To jsem jenom zkoušel jak to funguje.

Nahoru Odpovědět

22.11.2017 20:52

Člen

:22.11.2017 20:58

Ok. A čo myslíš tým "jakmile se výška horního elementu změní"? Prečo, na základe čoho sa ti mení?

Nahoru Odpovědět

22.11.2017 20:58

Ondřej Kavan

Člen

Ondřej Kavan:22.11.2017 21:03

Mám to udělané tak, že na menším rozlišení se navigace skryje a po kliknutí na tlačítko se vysune směrem dolů, takže je ta navigace vyšší.

Nahoru Odpovědět

22.11.2017 21:03

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 9 zpráv z 9.