InfoPage.pl » Szybka zmiana wielkości czcionki na stronie za pomocą java script i css’a. » Moje porady dla ludzi z netu
   InfoPage - strona główna bloga InfoPage - Lista artykułów znajdująca się na moim blogu InfoPage - zmiana adresu mojego bloga InfoPage - zmiana layoutu mojego bloga Infopage - linki do zaprzyjaźnionych stron
top
Powiększ tekst:

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

September 7th, 2009, 13:51 @ CSS, java script, Strony www
0 votes

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.



3 odpowiedzi do “Szybka zmiana wielkości czcionki na stronie za pomocą java script i css’a.”

  1. Daniel Says:
    November 24th, 2010 at 00:02

    Wmontowałem to w sklep działa ale jak daję więcej Div o id treść czy np. jest to w pętli to wtedy nie działa powiększa tylko pierwszego diva pużniej już nie

  2. admin Says:
    December 19th, 2010 at 10:43

    Proponuję id=”tresc” więcej nie używać. Tylko raz. Należy utworzyć inne id.

  3. pantomas Says:
    April 23rd, 2013 at 13:25

    Witam, ten skrypt nie spełnia podstawowych wymagań, po odświeżeniu strony wielkość czcionki wraca do domyślnej. To samo można i bez cookies zrobić, o wiele mniej kodu. Myślałem, że po to zapisuje do cookies, żeby pamiętał wielkość czcionki.

Zostaw komentarz:

Komentarze są moderowane, nie wysyłaj więc jednego komentarza kilka razy...