Ostatnim postem zakończyłem omawianie celu egzaminacyjnego dotyczącego pisania kodu, który potrafi wpływać na kontrolki interfejsu użytkownika. Nauczyliśmy się już dodawać i modyfikować elementy HTML za pomocą języka JavaScript. Poznaliśmy znaczniki pozwalające na osadzanie multimediów w dokumentach HTML5, a także dowiedzieliśmy się jak można korzystać z ich API. Zapoznaliśmy się tez z elementami graficznymi <canvas> oraz <svg>. Dziś rozpoczniemy zapoznawanie się z kolejnym celem jakim jest umiejętność zmieniania styli elementów HTML5 za pomocą JavaScript. Nauczymy się więc na czym polega pozycjonowanie elementów za pomocą CSS3, poznamy możliwości transformacji w CSS3 (to w kolejnym odcinku), a także dowiemy się jak ukrywać i pokazywać kontrolki.

Pozycjonowanie elementów za pomocą CSS3

Na początek trochę teorii dotyczącej pozycjonowania elementów HTML za pomocą CSS. Następnie omówimy jak to zrobić za pomocą języka JavaScript.

CSS3 dostarcza nam kilka właściwości pozwalających na pozycjonowanie elementów na stronie www. Pozwalają też sterować tym “warstwami”, tzn. czy dany element ma być wyświetlany nad czy pod innym elementem. Do sterowanie pozycją elementów, służą cztery atrybuty: ‘right’, ‘left’, ‘bottom’ oraz ‘top’. Jednak właściwości te zależą od tego, jaka jest wartość właściwości ‘position’. Poniżej omówienie wszystkich opcji właściwości ‘position’ oraz tego jak zachowują się pozostałe atrybuty w zależności od niego.

Pozycjonowanie statyczne

Jest to domyślna wartość właściwości ‘position’ - ta właśnie wartość jest ustawiana dla każdego elementu jeśli sami jej nie zdefiniujemy. Elementy pozycjonowane w ten sposób są zawsze pozycjonowane względem normalnego przepływu (ang. flow) dokumentu. Dla pozycjonowania statycznego, właściwości ‘right’, ‘left’, ‘top’ i ‘bottom’ są pomijane, nawet jeśli zostały ustawione.

Pozycjonowanie stałe (fixed)

W tym przypadku elementy pozycjonowane są względem okna przeglądarki - podczas “scrollowania” pozostają widoczne w tym samym miejscu, a pozostałe elementy dokumentu HTML, zachowują się tak jakby tak pozycjonowanego elementu w ogóle nie było. Za pomocą pozostałych czterech właściwości pozycjonowania, można sterować umiejscowieniem elementu w oknie przeglądarki (czyli de facto odpowiednim odsunięciem go od poszczególnych boków okna). Poniżej przykład:

div.fixedPosition {
    position: fixed;
    top: 50px;
    left: 10px;
}

Pozycjonowanie względne (relative)

Takie pozycjonowanie powoduje, że element przemieszczany jest o zadaną wartość względem swojej oryginalnej pozycji (czyli takiej jaką zająłby przy pozycjonowaniu statycznym). Właściwości ‘right’, ‘left’ itd. służą do określania kierunku i odległości o jaką ma nastąpić przesunięcie. Elementy pozycjonowane w ten sposób mogą zachodzić na inne elementy, ale są przez nie widoczne jakby zajmowały swoje miejsce przed przesunięciem.

div.relativePosition {
    position: relative;
    top: 10px;
    left: -10px;
}

Pozycjonowanie bezwzględne (absolute)

Elementy pozycjonowane bezwzględnie to pozycjonowanie względem najbliższego (w górę) elementu rodzica, który ma ustawione pozycjonowane inne niż statyczne (jeśli takowego nie ma, pozycjonuje się względem elementu <html>). Element taki, podobnie jak elementy pozycjonowane statycznie (fixed), zachowuje się tak, jakby był niewidoczny dla innych elementów dokumentu (nie wpływa na przepływ elementów - nie zajmuje miejsca).

Zachodzenie elementów na siebie

Jeśli elementy są pozycjonowane poza standardowym przepływem elementów (pozycjonowanie ‘fixed’ oraz ‘absolute’), można spowodować, że będą one zachodzić/zakrywać inne elementy. Jeśli jest takich elementów zachodzących na siebie więcej, wówczas może zajść potrzeba sterowania kolejnością “stosu” na jakim się znajdują. Do tego służy właściwość ‘z-index’ - im jego wartość większa tym element jest “wyżej”. Jeśli byśmy tej właściwości nie ustawili, wówczas decyduje kolejność w kodzie HTML.

div.over {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

div.above {
    position: absolute;
    top: 20px;
    left: 200px;
    z-index: 2;
}

Zmiana pozycjonowania elementów za pomocą JavaScript

Z poziomu JavaScript oczywiście również mamy możliwość zmiany pozycjonowania elementów. Poniżej przykładowy kod HTML:

<div class="positioned" id="container">Jakaś zawartość</div>

I styl dla klasy “positioned”:

div.positioned {
    position: absolute;
    left: 20px;
    top: 40px;

    width: 200px;
    height :400px;
}

Kod JavaScript, który zmieniałby pozycjonowanie na ‘fixed’ i właściwość ‘left’ wyglądałby następująco:

var div = document.getElementById('container');
div.style.position = 'fixed';
div.style.left = '100px';

Jak widać, poszczególne właściwości dostępne są poprzez właściwość ‘style’ elementu ‘div’.

Ukrywanie i pokazywanie elementów za pomocą JavaScript

Widzialnością elementów można sterować w CSS3 za pomocą właściwości ‘display’ - wystarczy ustawić ją na wartość ‘none’. Dzięki temu, sterowanie tym za pomocą JavaScript jest również banalnie proste. Na początek kod HTML:

<a onclick="showHide('container');" href="#">Pokaż/Ukryj element 'container'</a></pre>
<div id="container">Jakaś zawartość</div>

Jak widać, mamy element <div> posiadający jakąś zawartość. Powyżej znajduje się link, którego kliknięcie wywoła funkcję JavaScript - showHide(). Jak się można domyślić, funkcja ta odpowiedzialna jest za pokazywanie lub ukrywanie elementu o identyfikatorze ‘container’ (w zależności czy w danym momencie jest on widoczny czy też nie). Poniżej przykład, jak taka funkcja mogłaby być zaimplementowana:

function showHide(id) {
    var element = document.getElementById(id);

    if (element.style.display == 'block') {
       element.style.display = 'none';
    } else {
       element.style.display = 'block';
    }
}

Funkcja przyjmuje identyfikator elementu <div>, który ma schować/pokazać. Element ten jest odszukiwany za pomocą funkcji ‘getElementById()’. Następnie określamy w jakim stanie obecnie znajduje się element - jako, że ‘div’ jest elementem blokowym, gdy jest widoczny, właściwość jego stylu ‘display’ ma wartość ‘block’ - jeśli więc jest to ‘block’ to zmieniamy wartość ‘display’ na ‘none’ (ukrywamy), w przeciwnym razie ustawiamy na ‘block’ (pokazujemy). Ot i cała filozofia.

Na koniec pokażę jeszcze, że można to zrobić prościej za pomocą jQuery. Dla tego samego przykładu kodu HTML, kod przy użyciu jQuery byłby następujący:

$(document).ready(function() {
    $('a').click(function() {
        if ($('#container').is(':visible')) {
            $('#container').hide();
        } else {
            $('#container').show();
        }

        return false;
    });
});

Jak widać, w jQuery mamy dostępne specjalne metody ukrywające i pokazujące elementy - ‘hide()’ oraz ‘show()’ - można także uzyskać efekt animacji, powolnego ukrywania/pokazywania elementu - wystarczy przekazać im czas animacji w milisekundach. Zapraszam do przetestowania powyższego przykładu na jsfiddle.com.

Co dalej?

Na dziś to koniec. Myślę, że pozycjonowanie elementów za pomocą CSS3 oraz ukrywanie i pokazywanie elementów nie jest dla Was już niczym trudnym. W następnym odcinku zajmiemy się pozostałą częścią omawianego celu egzaminacyjnego -transformacjami w CSS3. Zapraszam!