m.InfoPage.pl » Moje porady dla ludzi z netu » wersja mobilna.
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.
Serwis: m.infopage.pl ma charakter edukacyjny. Bardzo prosze nie kopiowac zawartosci mojego serwisu.