Hirdetés

  2. Fórumok
  3. Szoftverfejlesztés
  4. JavaScript topic
Keresés
  • PROHARDVER!
    Frissítve: 2014-02-25 10:20 Téma összefoglaló
    PROHARDVER!

    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

  • martonx martonx veterán
    #8605
    #8602 Mr. Y
    Új Válasz
    Ú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
    martonx
    martonx
    veterán
    #8602 Mr. Y
    #8602 Mr. Y

    Sziasztok!

    22-es csapdába estem.
    Adva van egy mező, nevezzük DIV-nek. Az alap CSS paraméterezése szerint ez asztali környezetben display: block;, míg mobil környezetben display: flex;.

    Csakhogy, ez a mező az oldal betöltésekor display: none; módon eltűnik és csak egy gombnyomással lehet visszahozni. A probléma a következő, JS oldalról:

    document.getElementByID("DIV").style.display = "block"; - ebben az esetben ugye megjelenik és asztali felületen kiváló, csak ugye BLOCK lesz az mobilnézetben is. Ugyan ez van természetesen fordítva is.

    Szeretnék egy olyan megoldást, ahol a JS figyelembe veszi, hogy a Weboldal mobilnézetbe van-e, vagy sem és eszerint jeleníti meg az adott mezőt. Van erre megoldás?

    Előre is köszönöm!

    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.

  • nevemfel nevemfel senior tag
    #8604
    #8602 Mr. Y
    Új Válasz
    Ú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
    nevemfel
    nevemfel
    senior tag
    #8602 Mr. Y
    #8602 Mr. Y

    Sziasztok!

    22-es csapdába estem.
    Adva van egy mező, nevezzük DIV-nek. Az alap CSS paraméterezése szerint ez asztali környezetben display: block;, míg mobil környezetben display: flex;.

    Csakhogy, ez a mező az oldal betöltésekor display: none; módon eltűnik és csak egy gombnyomással lehet visszahozni. A probléma a következő, JS oldalról:

    document.getElementByID("DIV").style.display = "block"; - ebben az esetben ugye megjelenik és asztali felületen kiváló, csak ugye BLOCK lesz az mobilnézetben is. Ugyan ez van természetesen fordítva is.

    Szeretnék egy olyan megoldást, ahol a JS figyelembe veszi, hogy a Weboldal mobilnézetbe van-e, vagy sem és eszerint jeleníti meg az adott mezőt. Van erre megoldás?

    Előre is köszönöm!

    É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.

  • Taci Taci addikt
    #8603
    #8602 Mr. Y
    Új Válasz
    Ú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
    Taci
    Taci
    addikt
    #8602 Mr. Y
    #8602 Mr. Y

    Sziasztok!

    22-es csapdába estem.
    Adva van egy mező, nevezzük DIV-nek. Az alap CSS paraméterezése szerint ez asztali környezetben display: block;, míg mobil környezetben display: flex;.

    Csakhogy, ez a mező az oldal betöltésekor display: none; módon eltűnik és csak egy gombnyomással lehet visszahozni. A probléma a következő, JS oldalról:

    document.getElementByID("DIV").style.display = "block"; - ebben az esetben ugye megjelenik és asztali felületen kiváló, csak ugye BLOCK lesz az mobilnézetben is. Ugyan ez van természetesen fordítva is.

    Szeretnék egy olyan megoldást, ahol a JS figyelembe veszi, hogy a Weboldal mobilnézetbe van-e, vagy sem és eszerint jeleníti meg az adott mezőt. Van erre megoldás?

    Előre is köszönöm!

    É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