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

• martonx veterán

  #8605

  #8602 Mr. Y

  2021-04-23 22:46:20

  Ú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

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

  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.

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