JavaScript - Kody, triki, sztuczki

8 Lis 2020

Stylowanie przycisków radio/checkbox

Dzisiaj będzie o stylowaniu radio oraz checkbox butonów. Przykład jest w połączeniu z przekreślaniem treści, przydało się ostatnio w budowaniu składników przepisów.
Zacznę od html, są to dwa formularze z butonami po kliknięciu których wstawimy w h3 te opcje (value) które zaznaczyliśmy.
Poniżej skrócona wersja html, zaś na samym końcu wpisu cały przykład w codepen.io

Czytaj dalej →

27 Paź 2020

Ciekawy efekt z cieniem na każdej literze

Mała odskocznia i trochę styli na wieczór. Dzisiaj prosty przykład użycia text-shadow.
Zaczynamy oczywiście od prostego html. Na podstawie klasy 'add-shadow' pobieramy tekst i każdą literę owijamy w span

<div class="content">
  <h1 class="add-shadow">Frontend development</h1>
</div>

Czytaj dalej →

28 Wrz 2020

Zbiór przykładów użycia leaflet

Jakiś czas temu przygotowałem zbór przykładów użycia leaflet z mapami OSM. Jeżeli ktoś ma jakieś propozycje co można by jeszcze tam umieścić to poproszę podać w komentarzach. Całe repo znajduje się pod tym adresem - leaflet-examples

15 Lip 2020

Centrowanie mapy uwzględniając szerokość diva - fitBounds leaflet.

Tym razem przykład który pokazuje jak wycentrować mapę z pinem uwzględniając szerokość diva. Mapa posiada div nie jest on stworzony przez mapę tylko jest jako osobny div obok mapy a jedynie wyświetla się nad mapa. Do tego jeżeli mapę będziemy zmniejszasz/powiększać na szerokość to mapa wraz pinem będzie ustawiała się na odpowiednim miejscu.

fitBounds with leaflet

To jak konfigurujemy prostą mapę opisałem tutaj alternatywa dla google maps OSM oraz leaflet więc nie będę się już rozpisywał na ten temat.

Czytaj dalej →

26 Cze 2020

Dodawanie, przesuwanie i kasowanie markerów - Leaflet

Ten wpis pokaże w jaki sposób dodać, przesuwać oraz kasować markery. Przykład ten można fajnie wykorzystać. Jeżeli chcemy poznać współrzędne np. firmy. Moglibyśmy zrobić formularz w popupie który przechwyci kliknięcie i współrzędne geograficzne, jakieś pole na nazwę firmy, pole na opis firmy. Przydał by się również przycisk który zapisze te dane w bazie, a później wyświetlić te informacje wraz z markerem na produkcyjnej mapie.

To jak konfigurujemy prostą mapę opisałem tutaj alternatywa dla google maps OSM oraz leaflet więc nie będę się już rozpisywał na ten temat.

<div class="marker-position">click on the map, move the marker, click on the marker</div>
<div id="map"></div>

Czytaj dalej →

12 3…42 Następne »