Just Sharing Alls Post

Merubah size tampilan font dengan JavaScript


Yohohoooo everybody, apa kabar neh ??? Moga2 sehat2 semua ya :D 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!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 :
Reaksi: 
  • Merubah size tampilan font dengan JavaScript
  • Fahmi Si Garang Garong
  • Sabtu, 22 Maret 2014
  • Tidak ada komentar:
 

0 komentar:

Donasi

Jika Anda Suka Dengan Hasil Kerja Keras Saya,
++++++++++++++++++++++++++++++++++++++++++++
Dan Mau Berdonasi,
________________________________

Silahkan Kirim Ke Rek BCA : 3970005454 a/n Fahmi Permana
________________________________________

Berapapun Donasinya Akan Sangat Berarti Bagi Saya Kedepannya.
_____________________________________________________________

Terima Kasih Yang Sebanyak-Banyaknya Jika Anda Berkenan Berbagi Kebaikan Dengan Saya.
_____________________________________________________________________________________

Tulisan Ini Diketik Oleh : Fahmi Permana
***********************************