Dziudek's jogger

Plik element.dimensions.js służy do odczytywania informacji na temat rozmiarów i pozycji elementów w dokumencie. Dodatkowo zawiera funkcję do przewijania w żądane miejsce elementów posiadających właściwość overflow. Wpis ten podobnie jak wpis o pliku element.form.js ze względu na możliwości funkcji skupi się na teoretycznym omówieniu działania metod, ponieważ do wykorzystania tych metod wystarczy wiedza o tym jakie obiekty / wartości są przez nie zwracane.

getSize

Metoda getSize wywoływana w następujący sposób:

$('id_elementu').getSize();

Zwraca obiekt postaci:

{
    'scroll': {'x': wartosc, 'y': wartosc},
    'size': {'x': wartosc, 'y': wartosc},
    'scrollSize': {'x': wartosc, 'y': wartosc}
}

Dzięki niemu mamy dostęp do takich informacji jak:

• scroll - miejsce do którego jest przewinięty element (jeśli istnieje dla niego overflow),
• size - rozmiar elementu (wraz z wszelkimi obramowaniami itd.),
• scrollSize - rozmiar obszaru jaki można przewijać.

Każdy z wyżej wymienionych obiektów posiada dwa pola x i y.

Oczywiście do wartości odwołujemy się w sposób następujący:

jakaś_zmienna.size.x;

Gdzie do zmiennej jakaś_zmienna przypisujemy obiekt zwracany przez metodę getSize() danego elementu. Wyżej podany kod zawiera długość danego elementu.

getPosition

Metoda getPosition zwraca położenie danego elementu w postaci obiektu. Wywołujemy ją następująco:

$('id_elementu').getPosition();

A otrzymujemy obiekt postaci:

{x: wartosc, y: wartosc}

Dodatkowo metoda getPosition - jak i metody - getTop, getLeft i getCoordinates może pobierać tablicę elementów wewnątrz, których znajduje się nasz element, którego właściwości chcemy pobrać. Oczywiście podawane w tablicy elementy muszą posiadać atrybut overflow.

Zatem gdyby nasz element znajdował się w elemencie, który posiada overflow zapiszemy:

id('elementu').getPosition(['element_nadrzedny']);

getTop i getLeft

Metody getTop i getLeft zwracają odpowiednio wartości: odległości elementu od górnej części okna i odległości elementu od lewej części okna.

Wywołanie tych metod jest podobne jak w poprzednich przypadkach:

$('id_elementu').getTop();
$('id_elementu').getLeft();

Dodatkowo tak jak wspominałem za argument mogą pobierać elementy, które już wymieniłem przy okazji opisu metody getPosition.

getCoordinates

Najwięcej informacji o położeniu i rozmiarach obiektu, zwróci nam metoda getCoordinates:

Po wywołaniu:

$('id_elementu').getCoordinates();

Zostanie zwrócony obiekt postaci:

{
    width: wartosc,
    height: wartosc,
    left: wartosc,
    top: wartosc,
    right: wartosc,
    bottom: wartosc
}

Gdzie width i height to odpowiednio długość i wysokość elementu, a left,top,right i bottom to odpowiednio odległości od: lewej, górnej, prawej i dolnej części okna...

Ta metoda także może pobierać takie argumenty jak metody getPosition, getTop i getLeft

scrollTo

Funkcja scrollTo służy do przewijania danego elementu do określonych współrzędnych. Oczywiście element musi posiadać overflow i odpowiednią ilość treści.

Składnia funkcji wygląda następująco:

$('id_elementu').scrollTo(x,y);

Gdzie x i y to współrzędne punktu do którego ma zostać przewinięty element.

Przykładowo - gdybyśmy mieli div mający długość 200 pikseli wypełniony treścią o długości 400 pikseli i chcielibyśmy przewinąć zawartość elementu tak by była widoczna niewidoczna część to zapiszemy :

$('testowy').scrollTo(200,0);

W następnej części kursu przejdziemy już do grupy Window.