70-480 – Wyszukiwanie elementów przy użyciu selektorów arkusza CSS i kwerendy jQuery

70-480

Wybór odpowiedniego selektora w celu odwołania do elementu; definiowanie selektorów elementu, stylu i atrybutu; wyszukiwanie elementów przy użyciu pseudo-elementów i pseudo-klas (np. :before, :first-line, :first-letter, :target, :lang, :checked, :first-child).



Przedostatnim tematem dotyczącym egzaminu 70-480 będzie biblioteka jQuery. Nakłada ona na czysty język JavaScript (Vanilla) pewną warstwę abstrakcji oraz udostępnia API, które nie dość tego, że jest znacznie bogatsze i prostsze niż standardowe metody dostępu do elementów DOM, to wspiera wiele różnych wersji przeglądarek. Każdy kto zetknął się z pisaniem kodu JavaScript z pewnością słyszał o jQuery, więc dzisiejszy wpis będzie krótki, lecz treściwy.

Selektory CSS

Wyszukiwanie elementów jQuery jest bardzo podobne do nakładania styli poprzez stosowanie selektorów dostępnych w CSS. Spójrzmy na te podstawowe:

  • * – pobranie wszystkich elementów
  • #id – id elementu (pamiętajmy, że tylko jeden element na stronie może posiadać takie samo id)
  • .class – wszystkie elementy, które posiadają klasę class
  • .class1, .class2 – wszystkie elementy, które  mają ustawioną klasę class1 lub class2

Dzięki selektorom zależnym jesteśmy w stanie odwoływać się do poszczególnych elementów, które znajdują się w pewnej hierarchii względem innych elementów:

  • parent child – wszystkie elementy child, które są potomkami elementu parent, bez względu na stopień pokrewieństwa
  • parent > child – to samo co wyżej, ale w tym wypadku elementy child muszą być bezpośrednimi potomkami parent
  • element + next-element – wybranie elementu next-element, który występuje zaraz za elementem element
  • element ~ siblings – wszystkie elementy siblings, które są rodzeństwem dla element

Możemy również odwoływać się do poszczególnych atrybutów, a nawet ich wartości:

  • [attr=] – znak równości, więc wartość atrybutu musi równać się podanemu wyrażeniu
  • [attr!=…] – wartość atrybutu różna od podanego wyrażenia
  • [attr$=…] – wartość atrybutu kończyć się musi według podanego wyrażenia
  • [attr^=…] – wartość atrybutu zaczynać się musi według podanego wyrażenia
  • [attr~=…] – wartość atrybutu zawierać musi podane słowo
  • [attr*=…] – wartość atrybutu zawierać musi podane znaki

Mamy poza tym szereg pseudo-selektorów. Najpopularniejsze z nich to:

  • :hover – element wskazywany właśnie przez wskaźnik myszy
  • :focus – element, który aktualnie jest aktywny
  • :first-child – pierwsze dziecko danego elementu
  • :odd – wszystkie nieparzyste elementy w liście
  • :even – wszystkie parzyste elementy w liście
  • :disabled – wyłączonynieaktywny element

Pełna lista selektorow CSS na stronie w3schools.com – http://www.w3schools.com/cssref/css_selectors.asp

Wyszukiwanie elementów DOM przy pomocy jQuery

Podobnie sprawa wygląda w jQuery. Mają co dyspozycji utworzony obiekt jQuery / $ jesteśmy w stanie bardzo szybko wyłuskiwać poszczególne elementy ze struktury HTML.

// id
$('#myId');

// klasa
$('.myClass');

// atrybut
$('input[name="first_name"]');

// zagnieżdżone elementy
$('#contents ul.people li');

// pseudo - selektory
$('a.external:first');
$('tr:odd');
$('#myForm:input');
$('div:visible');
$('div:gt(2)');
$('div:animated');

Pełna lista dostępnych selektorów jQuery: http://api.jquery.com/category/selectors/

Na w3schools.com znajdziemy też ciekawe demo, które w interaktywny sposób unaoczni nam możliwości jQuery jeśli chodzi o znajdowanie elementów w strukturze HTML: http://www.w3schools.com/jquery/trysel.asp

70-480 – Tworzenie elastycznego układu zawartości

70-480

Wdrażanie układu przy użyciu elastycznego modelu pudełkowego; wdrażanie układu przy użyciu wielu kolumn; wdrażanie układu przy użyciu pozycjonowania elementów pływających i wykluczeń; wdrażanie układu przy użyciu opcji wyrównania siatki; wdrażanie układu przy użyciu regionów, grupowania i zagnieżdżania.



Model “flexbox

Model “flexbox” to nowy sposób na pozycjonowanie elementów blokowych względem siebie. Specyfikacja nie jest jeszcze w pełni ukończona, ale już teraz przeglądarki (poprzez przedrostki: -ms-, -webkit-, -moz-) umożliwiają korzystanie z własności modelu. Pozycjonowanie elementów odbywa się w pionie i poziomie z możliwością zdefiniowania co ma się dziać z wolnym miejscem. Jesteśmy także w stanie ustawiać poszczególne elementy w odpowiedniej kolejności oraz wyrównywać je względem okna przeglądarki.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy element container, który jest bazowym komponentem dla pozostałych trzech elementów box. Dla elementu nadrzędnego ustawiona jest własność display na wartość flex, co definiuje nam model flexbox dla wszystkich elementów blokowych, które są dziećmi tego elementu. Dla elementów box ustawiona została z kolei własność flex z wartością 1, co oznacza w zasadzie tylko tyle, że każdy element zajmuje tyle samo miejsca.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie doszła kolejna reguła, która dla pierwszego elementu box ustawia własność flex na wartość 2. Oznacza to, ze element ten będzie zajmować dwa razy więcej miejsca niżeli elementy z wartością 1. Widzimy to wyraźnie na przedstawionym przykładzie.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność do ustawienia to order, która również przyjmuje wartości liczbowe, a pozwala nam ustawić poszczególne elementy w odpowiedniej kolejności.

Kolejna własność to flex-direction, która przyjmuje cztery wartości:

  • row – domyślne ustawienie według kolejności HTML
  • row-reverse – odwrócona kolejność elementów
  • column – elementy ustawiane są od góry do dołu, według kolejności w HTML
  • column-reverse – odwrócona kolejność w pionie

Spójrzmy na przykład z wykorzystaniem wartości row-reverse:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

.. oraz wartości column:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna jest własność flex-wrap, która posiada trzy wartości:

  • wrap – niemieszczące się elementy przenoszone są do kolejnego wiersza lub kolumny
  • nowrap – blokujemy w ten sposób przenoszenie do nowego wiersza lub kolumny
  • wrap-reverse – przenoszenie do kolejnego wiersza lub kolumny z odwróceniem kolejności

Jest jeszcze własność, która łączy obie poprzednie: flex-flow. W ten sposób możemy sterować położeniem i kolejnością elementów, a także ich przenoszeniem do nowego wiersza lub kolumny przy użyciu jednej własności.

Kolejną własnością jest flex-align, czyli wyrównanie elementów względem siebie oraz okna przeglądarki. Posiada ona pięć następujących wartości:

  • start – wyrównanie do początku
  • end – wyrównanie do końca
  • center – wycentrowanie elementów
  • stretch – rozciąganie elementów
  • baseline – wyrównanie elementów (względem największego)

Microsoft przygotował tech demo, które pozwala samodzielnie pobawić się modelem “flexbox”: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_flex.htm

(Uwaga: działa jedynie pod IE!)

Tekst i interfejs kolumnowy

Kolejną ciekawą własnością CSS3 jest interfejs wielokolumnowy, który znamy z gazet, a który dotyczy ułożenia tekstu na stronie. Dzięki własnościom column-* możemy zdefiniować czytelny oraz bardziej przystępny layout dla tekstu.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dla kontenera zawierającego paragrafy tekstu zdefiniowana została w tym wypadku tylko jedna własność: column-count. Pozwala ona na określenie ilości kolumn na jaki zostanie podzielony tekst znajdujący się w danym kontenerze.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Kolejna własność, to odstęp pomiędzy kolumnami, który określa column-gap, przyjmująca jako wartość szerokość przerwy.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/k04d914q/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Powyżej widzimy wyraźne oddzielenie tekstu poprzez wykorzystanie własności column-rule, które tworzy linię, która separuje nam poszczególne kolumny.

Własności jest oczywiście więcej, ale zapraszam na stronę w3schools, gdzie jak zawsze znajdziemy pełen opis: http://www.w3schools.com/Css/css3_multiple_columns.asp

Microsoft również i dla własności multi-column przygotował demo, które w bardzo prosty sposób pokazuje w jaki sposób możemy manipulować tekstem: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_multi-column.htm

Opływanie elementów blokowych

Do tej pory znaliśmy tylko własność float, która pozwalała na opływanie elementu z lewej lub prawej jego strony. Wartość opływania mogliśmy wyłączyć poprzez wartość clear. CSS3 daje nam jednak możliwość sterowania opływaniem za pomocą tak zwanych wykluczeń.

Zacznijmy od spojrzenia na wartości dla własności wrap-flow, o której mowa:

  • auto – domyślnie, brak opływania
  • both – opływanie z każdej strony elementu
  • start – opływanie z lewej strony elementu
  • end – opływanie z prawej strony elementu
  • minimum – opływanie od strony, która zostanie zapełniona w minimalnym stopniu
  • maximum – opływanie od strony, która zostanie zapełniona w maksymalnym stopniu
  • clear – opływanie z lewej i prawej zostaje w tym przypadku wyłączone, tekst opływa dany element od góry i dołu

Wszystkie wartości zostały świetnie przedstawione w formie obrazków na stronie: https://docs.webplatform.org/wiki/css/properties/wrap-flow

Wyrównanie do siatki

Z kolejnym nowym modelem radzi sobie na razie w zasadzie jedynie przeglądarka ze stacji Microsoft: http://caniuse.com/#feat=css-grid Jest to jednak jeden z elementów egzaminu 70-480, więc na pewno się temu przyjrzeć. Chodzi mianowicie o budowanie layoutu strony w oparciu o tak zwany model grid, czyli siatkę elementów.

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pamiętajcie, że przykład powyżej działa w zasadzie jedynie w przeglądarce IE10+.

Po pierwsze dla kontenera container z elementami blokowymi box ustawiona została własność position: -ms-grid. Powoduje to włączenie layoutu siatki, dla wszystkich elementów blokowych wewnątrz elementu. Kolejną rzeczą jest definicja ilości kolumn oraz wierszy na naszej siatce. Posłużyły do tego dwie własności: -ms-grid-columns oraz -ms-grid-rows. Następnie każdemu elementowi ustawiona została konkretna pozycja na siatce za pomocą własności: -ms-grid-column-ms-grid-row.

Definiowanie ilości kolumn oraz wierszy, a także ich rozmiarów możliwe jest poprzez nadanie własnościom: -ms-grid-columns-ms-grid-rows wartosci:

  • px, em, % – standardowe jednostki
  • auto – wartość ustalana automatycznie na podstawie rozmiarów elementów rozmieszczonych na siatce
  • min-content – najmniejszy rozmiar wśród elementów
  • max-content – największy rozmiar wśród elementów
  • minmax(a, b) – zakres spomiędzy którego ma być ustalony rozmiar komórek na siatce
  • frakcje – jednostki części [fr]
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/5093r9uf/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W powyższym przykładzie widzimy rozciąganie elementów na wiele kolumn i wierszy przy pomocy -ms-grid-column-span oraz -ms-grid-row-span. I tak:

  • element 1 został rozciągnięty na dwa wiersze
  • element 2 został rozciągnięty zarówno na dwa wiersze, jak i dwie kolumny
  • element 3 został rozciągnięty na dwie kolumny

Siatka pozwala także wyrównywać elementy znajdujące się w jej polach. Służą do tego kolejne dwie własności: -ms-grid-column-align oraz -ms-grid-row-align.

Po raz kolejny możemy się z tym zaznajomić na demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_grid.htm

Budowanie układu przy użyciu regionów

CSS3 wprowadza jeszcze jeden sposób na układ naszej strony / aplikacji. Są to regiony, które rozmieszone mogą być po całym dokumencie, a z opcją współdzielenia tekstu pozwalają tworzyć ciekawe i zarazem niestandardowe układy, które często widzimy choćby w gazetach.

Pełna specyfikacja regionów znajduje się oczywiście na stronie konsorcjum W3C: http://dev.w3.org/csswg/css-regions-1/

Przyznam się, że nigdy nie miałem okazji korzystać z tej własności. Nie spotkałem się także z pytaniem na egzaminie, które dotyczyło tego tematu i wydaje mi się, że jest on dość mocno pomijany w materiałach przygotowujących. Materiały W3C pokazują temat w bardzo obszerny sposób, a do tego odsyłam Was znów do demo od Microsoft: http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_regions.htm

70-480 – Określanie właściwości tekstu HTML

70-480

Stosowanie stylów do wyglądu tekstu (kolor, pogrubienie, kursywa); stosowanie stylów do czcionki tekstu (format WOFF i funkcja @font-face, rozmiar); stosowanie stylów do wyrównania tekstu, odstępów i wcięć, stosowanie stylów do dzielenia tekstu, stosowanie stylów do cienia tekstu.



Dzisiejszym wpisem rozpoczynam ostatni rozdział materiału przygotowującego do egzaminu 70-480. Będzie to seria sześciu artykułów, które skupiać się będą na wyglądzie tworzonego przez nas HTML. Poznamy możliwości CSS3, elastycznego układu zawartości, animowanego i adaptacyjnego interfejsu użytkownika oraz spojrzymy co nieco na możliwości jQuery.

Jak mówi sam tytuł wpisu – zajmiemy się stylowaniem tekstu, czyli wielkość i kolor czcionki, odstępy, akapity, wyrównanie tekstu oraz rzucanym cieniem. Poniżej znajdzie głównie przykłady z jsfiddle.net. Móc coś przeczytać to jedno, ale od razu zobaczyć i móc eksperymentować to drugie.

CSS i tekst

Kolor czcionki

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wyrównanie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Dekoracja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/9/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Transformacja tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/10/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Wcięcie tekstu

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/11/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Łącznik tekstu

Łącznik tekstu to nic innego jak kontrolowanie tekstu pod względem łamania wyrazów na końcach linii. Odpowiedzialna jest za to właściwość hyphens.

Z tą funkcjonalnością kompletnie nie radzą sobie przeglądarki ChromeOperahttp://caniuse.com/#feat=css-hyphens

Poniższy przykład należy oglądać na Firefox lub Internet Explorer.

CSS hyphens

Efekt cienia

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/12/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-*

Przejdźmy do wyboru czcionki oraz jej ustawień. W CSS3 wyróżniamy trzy rodziny czcionek:

  • Serif (szeryfowe) – posiadające ozdobniki, np. Times New Roman, Georgia – nadające się do druku, ale ciężko czyta je się na ekranie monitora
  • Sans-serif (bezszeryfowe) – nieposiadające ozdobników, np. Arial, Verdana – gorzej wyglądające po wydruku, ale znacznie bardziej przyjemne w czytaniu na ekranie monitora
  • Monospace – jednakowe szerokości liter, np. Courier New, Lucida Console

font-family

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/14/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

W przykładzie widzimy trzy rodziny czcionek. Warto również zauważyć, że właściwość font-family przyjmuje po przecinku kilka wartości dla rodzaju czcionki. Spowodowane jest to tym, że docelowy użytkownik może nie mieć danej czcionki zainstalowanej na swoim komputerze. Sprawdzenie dostępności następuje od lewej, więc w pierwszej kolejności podajemy czcionkę najbardziej przez nas pożądaną, a na końcu generyczną rodzinę czcionek, którą użytkownik na pewno będzie miał u siebie.

font-style

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/17/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-weight

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/21/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

font-size

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/22/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Warto w tym miejscu zapoznać się wieloma jednostkami rozmiaru czcionki. W tym celu odsyłam do artykułu: CSS Units na w3schools.com.

@font-face

Dzięki właściwości @font-face jesteśmy w stanie zdefiniować własne czcionki lub używać serwisów takich jak Google Fonts, gdzie mamy dostęp do wielu niestandardowych czcionek, które możemy wykorzystać na naszej stronie. Całość jest niezwykle prosta i sprowadza się do zbudowania reguły, która pozwoli nam na użycie zdefiniowanej przez nas nazwy czcionki.

Wyróżniamy przy tym kilka formatów plików czcionek, a każdy obsługiwany jest przez inne przeglądarki:

  • EOT – IE9
  • TTF – przeglądarki mobilne
  • SVG – starsze wersje przeglądarki Safari
  • WOFF – współczesne przeglądarki
  • WOFF2 (nowszy, lepsza kompresja) – najnowsze wersje przeglądarek

Całość sprowadza się do kawałka kodu:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot');
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf')  format('truetype'),
       url('webfont.svg#svgFontName') format('svg');
}

.. oraz późniejszego (przykładowego) użycia:

font-family: 'MyWebFont', sans-serif;
[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/mfsnxc5b/24/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Polecam ponadto zapoznać się ze świetnym artykułem na ten temat: Using @font-face

70-480 – Programowe stosowanie stylów do elementów HTML

70-480

Zmiana lokalizacji elementu; stosowanie przekształcenia; pokazywanie i ukrywanie elementów.



Po raz kolejny, pod krótkim opisem ze strony Microsoft kryje się kilka tematów do omówienia. Tym razem będą to:

  • pozycjonowanie elementów w CSS3
  • pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript
  • transformacje 2D z wykorzystaniem CSS3

Pozycjonowanie elementów w CSS3 (CSS Positioning & HTML DOM Style Object)

Pozycjonowanie elementów w strukturze HTML może wydawać się skomplikowane, ale tylko na początku. Z pomocą przychodzą nam style CSS(3), które udostępniają kilka opcji sterowania warstwami, ułożeniem elementów oraz ich nachodzeniem na siebie.

Najważniejsze, to zrozumienie czterech wartości atrybutu position:

  • static – domyślna wartość każdego elementu. Jest to normalny przepływ w strukturze dokumentu HTML (od góry do dołu). Atrybuty: left, top, right, bottom nie wpływają w tym wypadku na elementy, nawet jeśli zostały zdefiniowane.
  • fixed – jak mówi sama nazwa – jest to pozycjonowanie stałe, a więc związane z oknem przeglądarki. Atrybuty left, top, right, bottom pozwalają nam ustalić pozycję elementu względem okna przeglądarki. Często możemy się spotkać z efektem przyklejonego górnego menu podczas scrollowania. To własnie efekt pozycjonowania stałego. Pozostałe elementy zachowują się tak, jakby elementów typu fixed w ogóle nie było w strukturze HTML.
  • relative – w zasadzie różni się od pozycjonowania statycznego tym, że tym razem atrybuty left, top, right, bottom mają realne odzwierciedlenie i ustawione dla danego elementu pozwalają przesuwać go względem jego oryginalnej pozycji. Pozostałe elementy traktują taki element jakby był on pozycjonowany statycznie i nieprzesunięty względem swojego oryginalnego położenia. Elementy mogą na siebie zachodzić, a warstwy definiować możemy za pomocą atrybutu: z-index.
  • absolute – pozycjonowanie bezwzględne, które w zasadzie posiada dwa stany:
    • jeżeli dla elementów (w górę) nie ustawiono pozycjonowania innego niż statyczne, to w zasadzie można to przyrównać to pozycjonowania stałego
    • jeżeli któryś element (pierwszy w górę) ma ustawione pozycjonowanie inne niż statyczne, to elementy ustawione jako absolute będą pozycjonowane względem tego elementu

    Co warto dodać, to informacja, że elementy pozycjonowane bezwzględnie nie zabierają miejsca i są traktowane przez pozostałe elementy jakby nie istniały w strukturze dokumentu HTML.

Pokazywanie i ukrywanie elementów za pomocą CSS i JavaScript (CSS Display and Visibility)

Widocznością elementów możemy sterować z poziomu CSS za pomocą dwóch atrybutów:

  • display
  • visibility

Różnicę pomiędzy nimi pokażę Wam na dwóch prostych przykładach. Pierwszy z nich prezentować będzie użycie display, a drugi visibility. Oba przykłady zawierać będą zdefiniowane trzy boxy z różnymi kolorami, gdzie dla środkowego boxa ustawiony zostanie odpowiedni atrybut widoczności.

display

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

visibility

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Różnicę bardzo łatwo jest zauważyć. W przypadku użycia display: none ukrywamy całkowicie środkowy box i znika on ze struktury HTML. Gdy używamy visibility: hidden, to wprawdzie element również znika, ale nie znika ze struktury HTML i zajmuje w pełni swoje miejsce.

Widocznością sterować możemy także z poziomu JavaScript:

[wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/2/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Pobieramy referencje do środkowego boxa oraz przycisku, a następnie tworzymy funkcję, która sprawdza, czy środkowy box jest widoczny lub nie i przypisuje odwrotną wartość do atrybutu display. Na końcu deklarujemy obsługę zdarzenia click dla przycisku i możemy się cieszyć możliwością ukrywania / pokazywania zielonego boxa.

Po więcej zapraszam oczywiście do materiałów na stronie w3schools. Zachęcam również do zapoznania się z biblioteką jQuery, która pozwala na dużo prostsze manipulowanie elementami HTML.

Transformacje 2D z wykorzystaniem CSS3 (CSS3 2D Transforms)

Ostatnim tematem wpisu są transformacje 2D, które możemy wykonać przy użyciu CSS3. Transformacje 2D wykonywane są w dwóch wymiarach i pozwalają zmieniać położenie, rozmiar oraz kształt elementów. Transformacje działają we wszystkich nowych wersjach przeglądarek, ale wymagają odpowiednich przedrostków dla atrybutu: transform:

  • Chrome, Safari, nowa Opera (15+) -webkit-
  • Firefox -moz-
  • Internet Explorer (9) -ms-
  • starsza Opera (< 15) -o-

Do dyspozycji mamy w zasadzie pięć funkcji, które przyjmowane są jako parametr dla transform (przykłady ze strony w3schools):

  • translate – przesunięcie względem osi X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/3/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Przesunięcie o 50px w prawo i 100px w dół.
  • rotate – obracanie elementu wokół własnej osi o zadaną liczbę stopni
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/4/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Obrót o 30 stopni względem wskazówek zegara. Podanie ujemnych wartości powoduje obrót przeciwny do wskazówek zegara.
  • scale – zmiana wielkości elementu względem wielokrotności wartości X i Y
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/5/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Powiększenie 2 razy w poziomie i 4 razy w pionie.
  • scew – odchylenie od osi X i Y wyrażane w stopniach
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/6/" style="width:100%;height:400px;border:solid #4173A0 1px;"]Odchylenie o 30 stopni od osi X i o 20 stopni od osi Y.
  • matrix – kombinacja pozostałych czterech metod w jedną, gdzie ozostałe funkcje są w zasadzie jakąś wersją funkcji matrix i zarazem aliasem do niej
    [wp-js-fiddle url="https://jsfiddle.net/mrzepinski/as7ssb43/7/" style="width:100%;height:400px;border:solid #4173A0 1px;"]

Zapraszam do własnych eksperymentów!

Roundup #14 – RSlider, Kube, Grunt, FlexiNavCalc, Codiad

Roundup #14 - RSlider, Kube, Grunt, FlexiNavCalc, Codiad

RSlider

Image sliders add life and interactivity to your web contents. But creating an image slider from scratch is not that easy. You need some good programming skills to create your own slider. If you are not the programmer or you just don’t want to re-invent the wheel, RSlider is for you. Its a full screen responsive image and content slider powered by the fantastic javascript library jQuery. With a nice and simple design it adjusted automatically to the width of your browser screen.

RSlider – A full screen responsive jQuery image & content slider


Kube

Minimal and enough. Adaptive and responsive. Revolution grid and beautiful typography. No imposed styles and freedom.

Kube Framework – A Minimal Responsive CSS Framework


Grunt

Grunt is a task-based command line build tool for JavaScript projects. It has the following predefined tasks that you can use in your project: Concatenate files, Validate files with JSHint, Minify files with UglifyJS, Run unit tests with nodeunit and etc. In addition to the built-in tasks, you can create your own tasks.

A Task-based Command Line Build Tool for JS Projects


FlexiNavCalc

FlexiNavCalc is a calculator for use in determining percentage widths of navigation items in responsive layouts. The aim of creating FlexiNavCalc is to avoid certain responsive navigation issues and to give the developer more control over navigation layout, especially full width navigation elements.

FlexiNavCalc – A calculator for determining % widths of navigation items in a responsive layout


Codiad

Codiad is a web-based IDE framework with a small footprint and minimal requirements. The system is still early in development, and while it has been proven extremely stable please be sure to backup regularly if you use it in any production work.

Open Source And Web-Based IDE For Coding Remotely – Codiad


[1], [2], [3]

Roundup #11 – Mobify, Freetile, TiltShift, Enquire, jsPDF

Roundup #11 - Mobify, Freetile, TiltShift, Enquire, jsPDF

Mobify

Mobify.js is an open source client-side web framework that helps you adapt any website to support any device. Powering millions of daily mobile visits to your favourite websites.


Freetile

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it’s children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

Pinterest-like Layout Plugin without Fixed Column Width


TiltShift

A jQuery plugin that uses the CSS3 image filters to replicate the tilt-shift effect. This is a proof of concept and currently only works in Chrome & Safari 6.

CSS3 Tilt-Shift Effect jQuery Plugin


Enquire

A lightweight JavaScript library for handling CSS media queries.

  • Deal with your media queries being matched (and even unmatched!)
  • Respond to browser events with aplomb
  • And if you want to get really fancy, run one-time setup routines
Handle CSS Media Queries With JS – Enquire.js

jsPDF

PDF files that are created online usually make use of the server-side languages (and their extensions/libraries for PDF).

jsPDF, a free JavaScript library, doesn’t need any server-side script and can create PDF files on the client-side.

Create PDF Files With JavaScript – jsPDF


[1], [2], [3]

Roundup #9 – gridster, Avgrund Modal, Sequence, BigScreen, D3 Charts, Toast, SlabText

Roundup #9 - gridster, Avgrund Modal, Sequence, D3 Charts, Toast, SlabText

gridster

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better.

gridster.js – a jQuery plugin for building intuitive draggable layouts


Avgrund Modal

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations.

Avgrund Modal


Sequence

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

Sequence.js – The jQuery slider plugin with infinite style


BigScreen

BigScreen makes it easy to use full screen on your site or in your app. It smoothes out browser inconsistencies and bugs, especially if the element you’re working with is inside of an <iframe>. It will also intelligently fall back to the older video full screen API if the element contains a <video> and the older API is available.

Full Screen Mode for Images & Videos in Web Apps


D3 Charts

In this tutorial we will introduce some basics of D3.js and create an infographic with multiple area charts along with a context tool to zoom and pan the data.

MULTIPLE AREA CHARTS WITH D3.JS


Toast

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Toast – A simple responsive CSS framework


SlabText

SlabText is a jQuery plugin for producing big, bold and responsive headlines. Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space.

jQuery Plugin for Producing Bold Responsive Headlines


[1], [2], [3], [4]

Roundup #8 – Ninja, TaffyDB, CSSFontStack, piecon, simpleWeather, Annotator, SiteCake

Roundup #8 - Ninja, TaffyDB, CSSFontStack, piecon, simpleWeather, Annotator, SiteCake

Ninja

Ninja is a fully featured content authoring tool for creative professionals who need to deploy HTML5 web applications for desktop or mobile, and want to create content in a visual way.

Ninja – An authoring tool for HTML5 content and apps


TaffyDB

How you ever noticed how JavaScript object literals look a lot like records? And that if you wrap a group of them up in an array you have something that looks a lot like a database table? TaffyDB is a libary to bring powerful database funtionality to that concept and rapidly improve the way you work with data inside of JavaScript.

Bringing Database Features into JavaScript Applications


CSSFontStack

CSSFontStack is a simple, one-page website which lists all the web-safe fonts. The website also allows us to copy the font-family CSS property for each font with a click.

A Complete List Of Web-Safe CSS Font Stacks


piecon

A tiny JavaScript library for dynamically generating progress pie charts in your favicons.

piecon – A library for generating favicon progress pie charts


simpleWeather

A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.

Get Any Weather Information With jQuery: simpleWeather


Annotator

The Annotator is an open-source JavaScript library and tool that can be added to any webpage to make it annotatable.

Annotations can have comments, tags, users and more. Morever, the Annotator is designed for easy extensibility so its a cinch to add a new feature or behaviour.

Annotator – An annotation JavaScript library


SiteCake

If you are looking for a simpler alternative or don’t prefer to empower your customers with so many features, SiteCake is a very good option.

SiteCake is an open source PHP CMS application which allows site admin to edit a website while browsing it.

SiteCake – Simple-Yet-Beautiful And Open Source CMS For Small Websites


[1], [2], [3]