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>
23 wrz 2021

#shorts - modal

modal
Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.

1 wrz 2021

blur/focus jak podglądnąć dane które znikają?

Zapewne się spotkałeś/łaś z tym, że czasami chcąc podglądnąć dane które pojawiają się np. na warstwie nagle znikają. Wszystko jest dobrze do czasu gdy klikniesz w menu kontekstowe w Chrome - ostatni element "zbadaj" otwiera się DevTools w chrome i ta warstwa znika.

Posłużę się przykładem a dokładnie stroną z takim zachowaniem, będzie to www.algolia.com. Nie będę tutaj opisywał czym jest "algolia" bo to można znaleźć na tejże stronie, a przejdę od razu do zachowania "Autocomplete".

Poniżej tak wygląda autocomplete gdy kliknę w pole input.
agolia autocomplete

12 maj 2021

Dodanie niestandardowych przycisków za pomocą QuickTag w WordPress

wstaw kod
Najpierw co to jest QuickTag?. Jest to API w wordpressie, które umożliwia dodanie przycisków (button) do edytora tekstu w panelu administratora.
Przydaje się na takich stronach jak ta 😉

Aby dodać szybki tag, musisz podłączyć niestandardową funkcję do hooka admin_print_footer_scripts. Chodzi o dodanie niestandardowego kodu javascript w stopce administratora. Interfejs API udostępnia wbudowaną funkcję o nazwie addButton:

1 maj 2021

Proste udostępnianie w sieci dzięki navigator.share

Metoda navigator.share() jest częścią interfejsu API Web Share. Na czym to polega? Z poziomu strony mamy dostęp do mechanizmu udostępniania, które to występuje w aplikacjach natywnych.

Poniżej przykład jak to wygląda w praktyce.
metoda navigator.share() jest częścią interfejsu API Web Share

Mamy przycisk "podziel się", kliknięcie w niego otwiera nam natywne menu, a z niego mamy możliwość wybrania interesującej nasz aplikacji.