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.
Kategoria: HTML
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.
Dodanie niestandardowych przycisków za pomocą QuickTag w WordPress
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:
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.
Mamy przycisk "podziel się", kliknięcie w niego otwiera nam natywne menu, a z niego mamy możliwość wybrania interesującej nasz aplikacji.
Jak najprościej do WooCommerce dodać InPost
Jest to najprostszy sposób na dodanie paczkomatów InPost do sklepu - Woocommerce. Nie użyjemy tutaj żadnego dedykowanego pluginu. Przykład ten dodaje jedynie pole gdzie możemy wybrać, czy wyszukać nasz paczkomat. Dodamy te dane do zamówienia ale ich nie przeliczymy. Informacje o paczkomacie pojawiają się również w zamówieniu oraz mailu który jest wysyłany do właściciela sklepu.