2. Fórumok
  3. Szoftverfejlesztés
  4. JavaScript topic
Keresés
  • Téma összefoglaló
    Utoljára frissítve: 2014-02-25 10:20

    Mobilarena

    JavaScript != Java (A JavaScript nem összekeverendő a Javával, két különböző programozási nyelvről van szó!)

Új hozzászólás Aktív témák

  • #8605 martonx veterán Mr. Y #8602
    Új Válasz #8605
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    martonx

    veterán

    válasz Mr. Y #8602 üzenetére

    Az én javaslatom, ami szerintem A megoldás, még ha elsőre komplexnek is hathat a js-es barkácsmódszerekhez képest:

    Egyrészt, ha mindent jól csináltál, akkor css media query-ket használtál, azaz tisztán css-ben dől el, hogy ez a div block vagy flex (ezen kicsit elmosolyodtam, hiszen a flex pont erre való, hogy ne kelljen media query-ket se használni, de te tudod, hogy miért jó hol block, hol flex-ként használni, szóval nekem már eleve itt bűzlik valami :B ).

    A tisztán css-es megoldásból kiindulva, csak annyit kell tenned, hogy csinálsz egy css class-t, amit hívj mondjuk .hidden-nek, amiben egyetlen egy rule van: display: none !important;
    Alapból oldal betöltésnél ezen a div-en legyen rajta ez a hidden class. Ezzel elérve, hogy betöltéskor ez az elemed nem fog látszódni. Ha minden igaz, akkor ezt eddig is így csináltad, ha viszont nem, akkor máris nem hiába koptattam a billentyűzetet.

    És amikor gombnyomásra vissza akarod hozni láthatóvá, akkor elég lesz csak ezt a class-t leszedni róla

    document.getElementById("bazinga").addEventListener('click', event => {
    document.getElementById("walami").classList.remove('hidden'); // fejből írtam, nem biztos, hogy hibátlan...
    });

    és voilá, ekkor máris a tisztán css-ben, az adott szabályoknak megfelelő display lesz rá érvényes :) és így nem kell js-ben találgatni, hiszen a js nem erre való (függetlenül attól, hogy js-ben is meg lehet oldani). Separation of Concerns.

  • #8604 nevemfel senior tag Mr. Y #8602
    Új Válasz #8604
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    nevemfel

    senior tag

    válasz Mr. Y #8602 üzenetére

    Én így oldanám meg a mező elrejtését, és az eredeti display visszaállítását, legyen az block vagy flex, vagy bármi más:

    <!DOCTYPE html>
    <html lang="en">

    <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>Document</title>
    <style>
    #walami {
    display: flex;
    }
    </style>
    </head>

    <body>
    <form>
    <input type="text" id="walami">
    </form>
    <script>
    document.getElementById("walami").style.display = "none";
    </script>

    <input type="button" id="bazinga" value="Bazinga!">
    <script>
    document.getElementById("bazinga").addEventListener("click", function(event) {
    document.getElementById("walami").style.display = "";
    });
    </script>
    </body>

    </html>

    Remélem, érthető a példa.

  • #8603 Taci addikt Mr. Y #8602
    Új Válasz #8603
    Új hozzászólás
    Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra
    Privát üzenet küldése

    Taci

    addikt

    válasz Mr. Y #8602 üzenetére

    Én a mobilos dolgokra egészen egyszerűen ezt használom:

    if (screen.width < 600){
    }

    Aztán persze ezt az értéket (szélesség pixelben) finomhangolhatod magadnak, de én is csak találtam, és nekem tökéletesen működik chrome dev tools-ban a különböző előre beállított képernyőfelbontásokra.

Új hozzászólás Aktív témák