CSS - Kody, triki, sztuczki

12 maj 2023

Jak animować wysokość od 0 do auto?

Mamy div który ma wysokość ustawioną na height: 0;. Po kliknięciu chcemy aby była "gładka" animacja pojawiąjącego się tekstu. Jest jeden problem, po toggle wysokość jest ustawiana na auto i zamiast "gładkiego" przejścia z wysokości 0 do auto, div po prostu się pojawia zamiast zwiększyć wysokość dynamicznie.
Powiesz, a czemu nie ustawić wysokości na konkretną "height i tutaj jest problem bo strona jest dynamiczna, więc wysokość tego diva z tekstem również jest dynamiczna.

Dobra najpierw pokażę jak to wygląda normalnie:

<button>Toggle</button>
<div class="expandable">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio
  deserunt porro nostrum dignissimos eveniet aperiam harum! Illum et eos
  atque. Dolorem, dolor deleniti impedit quibusdam nobis numquam quae
  maiores itaque? Lorem ipsum dolor sit, amet consectetur adipisicing elit.
  Et harum, minus, odit impedit id soluta nostrum nemo repudiandae fugit
  voluptatum voluptatibus fugiat quas cupiditate necessitatibus sunt numquam
  adipisci libero, deserunt distinctio deleniti quo eligendi?
</div>

Czytaj dalej

30 kwi 2023

window resize i optymalizacja

Czasami się zdarza, że musimy użyć "resize" 😉
Nie będę się rozpisywał co to jest wystarczy zerknąć tutaj - resize
Poniżej przykład użycia, a także wywołania jakiejś randomowej funkcji.

// nasz funkcja
function jakasFunkcja() {
  if (window.innerWidth < 600) {
     // tutaj coś robimy
  }
  else {
     // tutaj coś robimy
  }
}

// wywołanie funkcji
window.addEventListener('resize', jakasFunkcja);

Czytaj dalej

10 mar 2022

#shorts - wykrycie za pomocą css czy ekran ma funkcje dotykowe czy nie

Dość często potrzebujemy aby style były widoczne lub inaczej się zachowaywały/wyglądały gdy użytkownik używa strony na desktopie a inaczej na urządzeniu mobilnym "dotykowym" bez urządzenia sterującego np. myszy.

Do detekcji typu urządzenia możemy użyć "media queries".

Najpierw przyglądnijmy się @media (hover: hover)
W poniższym przykładzie jedynie urządzenia które mają możliwość najechania kursorem na element zmienią jego background. Oczywiście ten przykład jest mało życiowy, ale wyobraź sobie że możemy ukryć/pokazać element w zależności od urządzenia i nie potrzebujemy do tego js.

<a href="#">Link który powinien być podświetlić</a>

@media (hover: hover) {
  a:hover {
    background: red;
  }
}

Czytaj dalej

18 lut 2022

#shorts - utworzenie dodatkowych miejsc w kontrolce sterującej

W leaflet domyślnie mamy dostępne cztery miejsca (cztery rogi mapy) w które możemy wstawić własne elementy lub zmienić pozycję już istniejących elementów np. zoom in/out.
Te miejsca to oczywiście [topleft, topright, bottomleft, bottomright], a co jeżeli chcemy stawić dodatkowy element ale na górze strony i na środku.

Oczywiście możemy to zrobić na wiele sposobów, np. dodając div do strony i przez position abolute i z-index wyśrodkować dany element. Wstrzyknąć element do leaflet-control-container.

Czytaj dalej