java script

Tworzenie pierwszego plugina(wtyczki) do WordPressa

W ostatnim czasie potrzebowałem bardzo prostej wtyczki do WordPressa, która będzie dodawała informacje o Cookie na dole strony. Pomimo tego, że nie znam za bardzo kodu WordPressa postanowiłem napisać plugin. Tworzenie pierwszego plugina(wtyczki) do WordPressa rozpocząłem od studiowania dokumentacji.

Założenia są proste:

Użytkownik może zmodyfikować treść informacji o cookies.
Użytkownik może wybrać styl buttona
Skrypt działa na podstawie JQuery
Możliwa edycja parametrów skryptu w panelu administracyjnym

Po poznaniu dokumentacji tworzenia pluginów wordpressa zacząłem działać. […]

Autor |Maj 17th, 2014|PHP, Wordpress|3 komentarze

CSS transitions

CSS transitions są częścią specyfikacji CSS3 . Przekształcenia CSS dostarczają kontroli nad zmianą właściwości stylów. Zamiast natychmiastowo zmienić wartość dostarczają one funkcji, która pozwala dostosować tempo, rodzaj i które właściwości powinny zostać zmienione.

Zmiany zwykle są nazywane „niejawnymi przekształceniami” z uwagi na to, że stany pomiedzy przekształceniami nie są jawnie definiowane przez użytkownika. Użytkownik widzi […]

Autor |Luty 27th, 2014|JavaScript|0 komentarzy

Dynamiczne wyszukiwanie danych w tabeli JQuery

Często napotykanym problemem przez programistów jest dynamiczne wyszkukiwanie danych w tabeli. Problem ten można łatwo rozwiązać używając funkcji filter() dostępnej w bilbliotece JQuery.

Funkcja filter() w Jquery ograniczna zbiór dopasowanych lementów do tych które odpowiadają selektorowi lub spełniają test funkcji.
Kolorowanie co drugiego elementu listy
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Za pomocą jquery piszemy kod:
$( "ul li" ).filter( ":even" ).css( "background-color", "red" );
Funkcja dopasuje parzyste elementy i wykona na nich funkcje css(), która zmieni kolor na czerwony. Oczywiście w tym prostym przykładzie wystarczy, że zastosujemy prosty css i efekt dostaniemy taki sam, ale chodzi o pokazanie działania funkcji filter().
Użycie funkcji testującej
Druga forma funkcji filter() pozwala nam na zastosowanie funkcji sprawdzającej. Dla każdego elementu, na którym zostanie wykonana funkcja filter, zostanie przeprowadzony test funkcji, którą piszemy sami.

Przykładowy kod:
<ul>
<li><strong>list</strong> item 1 – one strong tag</li>
<li><strong>list</strong> item <strong>2</strong> –
two <span>strong tags</span></li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
Możemy filtrować elementy listy na podstawie ich zawartości.
$( "li" )
.filter(function( index ) {
return $( "strong", this ).length === 1;
})
.css( "background-color", "red" );
Ten kod na każdym elemencie listy(<li>) wykona metodę filter, która posiada funkcje sprawdzającą. Funkcja ta sprawdza czy w danym elemencie listy znajduje się więcej niż jeden tag <strong>. Jeżeli tak jest to wykonana jest funkcja CSS, która zmieni kolor tła elementu na czerwony. Przeczytaj więcej, aby dowiedzieć się o dynamicznym wyszukiwaniu elementów w tabeli.  […]

Autor |Luty 19th, 2014|JavaScript, Tworzenie stron internetowych|21 komentarzy

Dlaczego warto używać JQuery

JQuery to biblioteka, dzięki której pisanie skryptów w JavaScript okazało się przyjemne i proste. Nie musisz już zwracać uwagi na kompatibilność kodu JavaScript oraz pisać bardzo długich lini kodu aby uzyskać zamierzony efekt. JQuery jest bardzo intuicyjnym i jednocześnie potężnym narzędziem, które pozwala nam tworzyć zaawansowane strony internetowe.
Dlaczego warto używać JQuery?
Weźmy kilka przykładów kodu, […]

Autor |Grudzień 19th, 2013|JavaScript, Tworzenie stron internetowych|0 komentarzy

Canvas w HTML5

Element Canvas jest nowym znacznikiem w HTML5. Znacznik ten wprowadził do HTML obsługę renderowania grafiki 2D oraz 3D. Dzięki niemu za pomocą skryptów JavaScript możemy tworzyć zaawansowane aplikacje graficzne oraz np gry bez konieczności instalowania dodatkowych wtyczek takich jak flash lub Silverlight.

Canvas w prosty sposób umożliwia nam rysowanie elementów.

Prześledzmy kilka przykładów przygotowanych przeze mnie:

Jest […]

Autor |Grudzień 16th, 2013|JavaScript, Tworzenie stron internetowych|0 komentarzy

Odliczanie czasu w Jquery

Kolejny wpis poświęcę na napisanie prostego skryptu do odliczania czasu w Jquery. Często takie skrypty wykorzystywane są w stronach i aplikacjach www np. do odliczania czasu pozostałego do automatycznego wylogowania się z aplikacji.

Do tego celu wykorzystam dwie bardzo ciekawe funkcje w JavaScript mianowicie setInterval() oraz clearInterval().

Funkcja setInterval przyjmuje dwa argumenty pierwszym z nich jest […]

Autor |Grudzień 5th, 2013|Tworzenie stron internetowych|0 komentarzy

Jquery prosty skrypt zakładek

W poprzedniej części omawiałem animacje, tym razem przyszedł czas na prosty skrypt zakładek napisany w JQuery. W poprzednich częściach omawiałem obsługę zdarzeń i kilka funkcji, które w zupełności wystarczają do napisania takiego skryptu.

Pisanie skryptów w JQuery powinniśmy zacząć od poprawnej struktury kodu HTML. W zakładkach będziemy potrzebować elementów, które możemy kilknąć by przejść do […]

Autor |Listopad 29th, 2013|Tworzenie stron internetowych|0 komentarzy

Jquery – podstawy animacji

W poprzednim wpisie przedstawiłem obsługę zdarzeń oraz selektory. W tym wpisie pokażę gotowy przykład, który wykorzystuje animacje. Do zrozumienia tego przykładu będzie potrzebna podstawowa wiedza z CSS, JavyScript oraz HTML.

Potrzebne nam będą 3 warstwy html, jako obiekt warstwy możemy użyć znacznika DIV
<div class="pudelko"></div>
<div class="pudelko zaaograglone"></div>
<div class="pudelko wypasione"></div>
Warstwy te zawierają 3 pudelka, które posłużą nam do zaprezentowania animacji JQuery.

Aby te „pudełka” nabrały wyglądu należy je odpowiednio wystylować, użyję do tego CSS
div.pudelko{width:100px; height:100px; margin:5px; float:left; background-color:red;}
div.pudelko.zaaograglone{border-radius:25px;}
div.pudelko.wypasione{border: 4px solid black;}
Ogólnie każde pudełko ma rozmiar 100×100 px w ogół margines 5px. Pudełka układane są od lewej strony oraz mają czerwony kolor tła. Pudełko zaaokrąglone posiada zaokrąglenie 25px a pudełko wypasione posiada obramowanie o szerokości 4px w kolorze czarnym.

Czas na JQuery.  […]

Autor |Listopad 28th, 2013|Tworzenie stron internetowych|0 komentarzy

Jquery dla początkujących zdarzenie ready() oraz click()

Zapewne interesujesz się programowaniem stron internetowych i chciałbyś dodać do nich trochę dynamiki, ale nie wiesz jak. Artykuł przeznaczony jest dla początkujących, którzy chcą zacząć swoją przygodę z JQuery Do tego celu wykorzystywany jest język JavaScript. Czym zatem jest Jquery?

Jquery jest to bliblioteka, która znacznie ułatwia korzystanie z języka JavaScript. Jquery zajmuje bardzo mało […]

Autor |Listopad 27th, 2013|Tworzenie stron internetowych|0 komentarzy

Jak stworzyć stronę internetową część 1

Jeżeli trafiłeś/trafiłaś na tą stronę to pewnie zastanawiasz się jak wygląda proces tworzenia stron internetowych. Pozwól, że Ci to wyjaśnię. Postaram się by ten wpis był zrozumiały dla osób nietechnicznych. Do zrozumienia tekstu wymagana jest znajomość kilku pojęć:

HTML – język znacznikowy dzięki, któremu wyświetlane są strony www
CSS – jest to język służący do stylowania […]