m.InfoPage.pl » Moje porady dla ludzi z netu » wersja mobilna.

Powrot do strony glownej m.InfoPage.pl | Wszystkie artykuly - lista


Szybka zmiana wielkości czcionki na stronie za pomocą java script i css'a.

Data dodania: 2009-09-07 13:51:18

Przeglądając globalną sieć napotykałem ciekawy trick na stronach. Jest to kilka buttonów "AAA", za pomocą których wielkość czcionki tekstu zwiększa się, bądź zmniejsza, w zależności od potrzeb osoby czytającej serwis. Zaciekawiło mnie rozwiązanie tego problemu. Pobrałem stronę, która posiadała taką dogodność i zacząłem grzebać w kodzie. Po kilku chwilach, miałem już kod potrzebny do zaimplementowania na stronie docelowej, tej, którą właśnie czytasz ;)


Modyfikacja składa się ze skryptu java zaimplementowanego w "index.html", stylów w pliku "style.css" oraz buttonów, które znajdują się w katalogu "navi". index.html
<html><head><link rel="stylesheet" href="style.css" type="text/css" media="screen" /></head><body><center> <script language="JavaScript" type="text/javascript"> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function change_size(punkt) { document.getElementById('tresc').style.fontSize=punkt; createCookie("textSize", punkt, 90); } </script> <span id="powieksz">Powiększ tekst: <a href="#" onclick="change_size('15px')"><img src="./navi/a.gif" alt="" border="0"></a> <a href="#" onclick="change_size('17px')"><img src="./navi/b.gif" alt="" border="0"></a> <a href="#" onclick="change_size('22px')"><img src="./navi/c.gif" alt="" border="0"></a> </span> <div id="tresc"> Jakiś tekst do zmieniania wielkości. </div> </center></body></html>
style.css
body { color: #000; background-color: #3c4e4e; font: small sans-serif; font-size:11px; } #powieksz { float: center; display: block;padding:0px; margin:0px; font-size:13px; font-weight:bold; text-decoration:none; color:#000; } #powieksz span { font-weight: bold; cursor: pointer; } #powieksz span#maly { font-size: 15px} #powieksz span#sredni { font-size: 17px} #powieksz span#duzy { font-size: 22px}
Na końcu należy stworzyć katalog "navi", w który należy wrzucić buttony: "a.gif", "b.gif", "c.gif". Aby tekst zwiększał bądź zmniejszał swoją wielkość musi być zawarty w tagach "<div>".
<div id="tresc">Treść tekstu</dvi>
Jak zwykle, zamieszczam paczkę do ściągnięcia z gotowym, działającym kodem. Uważam, że jest to dobry krok, aby serwis mógł być odwiedzany także przez osoby, które mają problemy ze wzrokiem. Polecam.

Powrot do strony glownej m.InfoPage.pl | Wszystkie artykuly - lista


Serwis: m.infopage.pl ma charakter edukacyjny. Bardzo prosze nie kopiowac zawartosci mojego serwisu.