Zdefiniowanie problemu

Najczęściej realizowany jest on poprzez utworzenie kilku przycisków, dzięki którym cała strona lub poszczególna treść zmienia rozmiar, krój lub wygląd czcionek, czy innych, możliwych do skalowania elementów. Często spotykanym rozwiązaniem jest wyświetlenie użytkownikowi kilku, różnej wielkości, liter A.

Darmowym skryptem obsługującym ww. efekt jest trzecia wersja phpBB.

Rysunek 1: przykładowa nawigacja.

Teoria implementacji

Nasz sposób będzie bazował na dwóch elementach: utworzeniu arkuszy stylów definujących wygląd poszczególnych stopni wielkości oraz napisanie funkcji „aktywującej" jeden z nich, w zależności od intencji użytkownika.

Załóżmy więc, że w naszym przykładzie będziemy chcieli wyświetlać treść w czterech różnych trybach (jak na rysunku 1). Możemy stworzyć więc pięć kaskadowych arkuszy stylów, gdyż główny a zarazem bazowy będzie odpowiadał właściwościom zgodnym dla każdej metody wyświetlania. Znacznikom link, załączającym zewnętrzny CSS, nadamy także specjalne tytuły, dzięki którym będziemy w stanie rozpoznać je w niżej opisywanym skrypcie JavaScript.

<link rel="stylesheet" type="text/css" href="styles.css" /> <!-- styl bazowy -->
<link rel="stylesheet" type="text/css" href="styles-normal.css" title="normal_size" /> <!-- styl normalnej wielkości, ładowany domyślnie -->
<!-- alternatywne arkusze -->
<link rel="alternate stylesheet" type="text/css" href="styles-verysmall.css" title="verysmall_size" />
<link rel="alternate stylesheet" type="text/css" href="styles-small.css" title="small_size" />
<link rel="alternate stylesheet" type="text/css" href="styles-large.css" title="large_size" />

Zwróćmy uwagę także na zawartość atrybutów rel trzech ostatnich linijek. Zawierają one frazy alternate wskazujące na alternatywne użycie tychże plików.

Przechodząc do kwestii dynamicznej zmiany wyglądu, tworzymy funkcję JS, która w zależności od przekazanego identyfikatora będzie wymuszać korzystanie z odpowiedniego arkusza. Przekazywane ID jest, co do zawartości, jedną z ww. wartości atrybutu title tagu link.

Rysunek 2: zasada działania.

Tak oto, w specjalnie przygotowanej pętli, przechodzącej przez wszystkie alternatywne znaczniki link posiadające atrybut title, sprawdzamy, czy któryś z tych tytułów jest tym, który przekazujemy w parametrze naszej funkcji.

function changeContentSize(title) {
var handler, i = 0;
while( handler = document.getElementsByTagName('link')[i++] ) // sprawdzenie wszystkich tagów <link ...>
{
if( handler.getAttribute('title') && handler.getAttribute('rel').indexOf('stylesheet') != -1 ) // testowanie tylko alternatywnych i posiadających atrybut tytuł
{
if( handler.getAttribute('title') == title ) // jeżeli użytkownik wywołał istniejący arkusz stylów aktywujemy go i skaczemy do kolejnej iteracji
{
handler.disabled = false;
continue;
}
handler.disabled = true; // w przeciwnym razie
}
}
}

Na koniec, pozostaje podpiąć powyższy skrypt.

<script type="text/javascript" src="skrypt.js"></script>