Merubah size tampilan font dengan JavaScript

Yohohoooo everybody, apa kabar neh ??? Moga2 sehat2 semua ya😀 Ok all pada postingan ane yang kesekian ini ane akan mensharing bagaimana caranya mengubah ukuran tampilan font secara otomatis. Oh iya hampir lupa script ini dipakai di Joomla loh, sebenarnya ane terinspirasi untuk buat postingan ini ketika ane ikut Lomba Kompetensi Siswa nah salah satu poin penilaiannya tentang ini. Ya udah to the point aja langsung ya neh cekibroot

Pertama – tama buat dulu file JavaScriptnya, sekedar info script ini merupakan sebagian dari isi dari file Joomla yang bernama “md_stylechanger.js” jadi script ini bukan buatan ane melainkan ciptaan pegawai Joomla, kalau udah di copas trus save dengan name “perubah.js” atau terserah ente deh namanya

/*global window, localStorage, fontSizeTitle, bigger, reset, smaller, biggerTitle, resetTitle, smallerTitle, Cookie */
var defaultFontSize = 100;
var currentFontSize = defaultFontSize;
function setFontSize(fontSize){
document.body.style.fontSize = fontSize + '%';
}
function changeFontSize(sizeDifference){
currentFontSize = parseInt(currentFontSize, 10) + parseInt(sizeDifference * 5, 10);
if (currentFontSize > 180){
currentFontSize = 180;
} else if (currentFontSize < 60){
currentFontSize = 60;
}
setFontSize(currentFontSize);
}
function revertStyles(){
currentFontSize = defaultFontSize;
changeFontSize(0);
}

Nah untuk pengaplikasiannya buat sebuah file html, contohnya seperti script ini :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en-gb" xmlns="http://www.w3.org/1999/xhtml" lang="en-gb">
<head>
<script type="text/javascript" src="perubah.js"></script>
</head>
<title>Script perubah ukuran font</title>
<body>
<div id="fontsize">
<h3>Font size</h3>
<p class="fontsize">
<a onclick="changeFontSize(2); return false;" title="Increase size" class="larger" href="index.html">Bigger</a>
<a onclick="revertStyles(); return false;" title="Revert styles to  default" class="reset" href="index.html">Reset</a>
<a onclick="changeFontSize(-2); return false;" title="Decrease size" class="smaller" href="index.html">Smaller</a>
</p>
<p>Ukuran Fontnya pasti berubah</p>
</div>
</body>
</html>

Nah hasilnya nanti seperti ini untuk ukuran font standart :


Nah hasilnya nanti seperti ini untuk ukuran font yang paling besar :


Ini tampilan untuk ukuran font yang paling kecil :


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s