Niezalogowany [ logowanie ]
Subskrybuj kanał ATOM Kanał ATOM    Subskrybuj kanał ATOM dla tagu javascript Kanał ATOM (tag: javascript)

Autor wpisu: zleek, dodany: 26.01.2022 08:14, tagi: css, javascript

I have prepared a code which shows a nice spinner on the page. It contains a central part with some content (in example it is just a timer). Around we have three oval shapes with different opacitiy which spins with

Autor wpisu: zleek, dodany: 18.09.2019 14:22, tagi: javascript

Here is the simple code snippet which allows to observe any DOM modifications for the element on the page. It can be used to check if any asynchronous update was made to the selected part of website.

Autor wpisu: zleek, dodany: 21.04.2017 10:31, tagi: javascript, php

As we tak a look on websites, we can easily see that most of them have contact form built in. But having this contact form could switch to huge amount of spam messages sent by using that form. Fortunatelly we

Autor wpisu: cichy, dodany: 03.12.2016 06:25, tagi: css, javascript

Dziś wszystkie strony jakie powstają powinny być „responsywne” i wyświetlać się poprawnie na wszystkich urządzeniach począwszy od telewizorów / telebimów a na telefonach skończywszy. Takie podejście w 2016 roku nie powinno nikogo dziwić, jednak co ze starymi projektami, no cóż trzeba je przepisać według nowych zasad. Właśnie podczas pracy nad nową wersją jednego z projektów, którym zajmuje się w pracy, przyszło mi zmierzyć się z koniecznością użycia różnego kodu JavaScript w zależności od aktualnych styli używanych przez twitter bootstrap. W tym poście chciałbym przedstawić pokrótce jak można to osiągnąć za pomocą biblioteki Responsive Bootstrap Toolkit.

Biblioteka do której link umieściłem we wstępie jak sam jej opis mówi, jest narzędziem pozwalającym na łatwe kontrolowanie przepływu kodu JavaScript w zależności od aktualnie aktywnego „breakpointu”.

Można by zapytać czym w takim razie są owe breakpointy postaram się wyjaśnić to jak najdokładniej potrafię. Wyobraźmy sobie sytuację w której piszemy stronę internetową, jednak aby wyświetlała się ona poprawnie musimy mieć mechanizm pozwalający na ukrycie lub wyświetlenie niektórych elementów tylko i wyłącznie dla określonego rozmiaru ekranu, jest to naturalna potrzeba i większość frameworków CSS takich jak bootstrap taki mechanizm posiada.

Przykładowe breakpointy mogłyby wyglądać tak:

@media (max-width: 180px) {
.pokaz-dla-malych-urzadzen { display: block; }
.ukryte-na-malych-urzadzeniach { display: none; }
}
@media (min-width: 181px){
.pokaz-dla-malych-urzadzen { display: none; }
.ukryte-na-malych-urzadzeniach { display: block; }
}

podsumowując powyższy zapis oznacza, że dla ekranu o szerokości <=180 pikseli elementy z klasą pokaz-dla-malych-urzadzen mają ustawioną właściwość display na block dla ekranów o szerokości >=181 pikseli te same elementy będą ukryte (display:none) w zasadzie to cała teoria i magia owych breakpointów.

Przejdźmy zatem do rzeczy, co z kodem JavaScript, tutaj wkracza przytoczona przeze mnie biblioteka Responsive Bootstrap Toolkit.

Myślę że nie ma sensu rozwodzić się nad tym jak ta biblioteka działa, najważniejsze to stwierdzić o niej 2 zasadnicze rzeczy: po pierwsze biblioteka naprawdę działa, po drugie choć w nazwie biblioteki widnieje bootstrap to możemy jej używać z każdym frameworkiem CSS. Na stronie repozytorium, widnieją doskonałe przykłady tego jak biblioteki używać, więc uznałem, że nie ma sensu w przepisywaniu tego jeszcze raz.

Autor wpisu: zleek, dodany: 18.05.2016 08:38, tagi: css, javascript

Fetching resources over the network is both slow and expensive: the download may require multiple roundtrips between the client and server, which delays processing and may block rendering of page content, and also incurs data costs for the visitor. All

Autor wpisu: batman, dodany: 13.05.2016 14:00, tagi: javascript, php

Tworzenie webowych aplikacji działających w czasie rzeczywistym zazwyczaj wymagało niemałej gimnastyki oraz sporej dozy cierpliwości. Na szczęście z pomocą przychodzi Laravel i socket.io, dzięki którym stworzenie takiej aplikacji to przysłowiowa bułka z masłem. W tym artykule przedstawię krok po kroku przepis na aplikację, która pozwala na wysyłanie wiadomości, które wyświetlane są użytkownikom owej aplikacji od razu, bez konieczności odświeżania strony. Zanim zaczniemy, musimy przygotować środowisko pracy. W przypadku Laravela idealnie nadaje się do tego Homestead, który ma już wszystko... [[ This is a content summary only. Visit my website for full links, other content, and more! ]]

Autor wpisu: JoShiMa, dodany: 12.05.2016 02:04, tagi: jquery, javascript, skrypty

Poszukiwałam niedawno pilnie rotatora banerów. Potrzebowałam czegoś co będzie spełniać określone przez klientkę wymagania i da się zainstalować w aplikacji bez problemów. Siłą rzeczy stawiałam na jQuery bo lubię a w dodatku już zostało wykorzystane w aplikacji a ja nie chcę mnożyć bytów ponad potrzebę. Cierpliwość się opłaciła. Znalazłam narzędzie, które spełnia wszystkie moje oczekiwania. […]
Wszystkie wpisy należą do ich twórców. PHP.pl nie ponosi odpowiedzialności za treść wpisów.