Dinamički promijenite veličinu slova

Skoro svi webmaster-i pokušavaju što više udovoljiti svojim čitateljima i napraviti web lokaciju koja svima odgovara. Naravno da je nemoguće svima udovoljiti, a da se ne odreknete nekih principa. Jedna od stvari koje lako možemo prilagoditi je veličina slova. Na ovaj način će svaki korisnik moći sam podesiti odgovarajuću veličinu koja upravo njemu odgovara. U ovom tutorijalu iskoristit ćemo JavuScript.

Odmah na početku vidimo da će biti potrebne dvije funkcije. Jedna za povećavanje, a druga za smanjivanje veličine slova. Ove dvije funkcije ćemo staviti u head dio HTML dokumenta.



<script type="text/javascript">

var minvalue = 6;
var maxvalue = 20;
var changeby = 2;

function povecajfont()
{


var i = parseInt(document.getElementById('div_clanak').style.fontSize);

i = i + changeby;

if (i <= maxvalue)
{
document.getElementById('div_clanak').style.fontSize = i;
}

}

function smanjifont()
{

var i = parseInt(document.getElementById('div_clanak').style.fontSize);

i = i - changeby;

if (i >= minvalue)
{
document.getElementById('div_clanak').style.fontSize = i;
}

}


</script>





Na početku skripte definirali smo varijable koje trebate podesiti po vlastitoj želji. Odnose se na minimalnu i maksimalnu veličinu te na promjenu vrijednosti po kliku. I jedna i druga funkcija imaju ovaj dio koda:



document.getElementById('div_clanak').style.fontSize


Pomoću njega pristupamo veličini slova u elementu div_clanak. Nakon toga koristimo funkciju parseInt(). Vrijednost fontSize iznosi npr. "14px". Nama je potreban samo broj bez zadnjeg dijela "px". Ova funkcija nam jednostavno izvuče broj iz ovoga niza znakova. Nakon što imamo broj jednostavno povećamo ili smanjimo tu vrijednost u ovisnosti koju smo funkciju pozvali.

Pogledajmo i dio koji ide u body dio:



<a href="javascript:povecajfont();">
<img src="add.gif" border="0">
</a>

<a href="javascript:smanjifont()">
<img src="subtract.gif" border="0">
</a>

<div id="div_clanak" style="background-color: #bbbbbb; font-size: 14px">
Ovo je probni tekst
</div>