Have you ever come accross some site have have an option to change the font size dynamically when you click on the link you see the fonts (letter and numbers) change in size from big to small.

Well, today i am going to teach you how to put a link on your web page so that whenever someone clicks on it, it will make the fonts smaller or larger (bigger).

The first thing to do so you can learn from from this simple step by step tutorial is to open a new document. you can use notepad if you want to. So for the purpose of this tutorial, i will also be using notepad.

step one is to copy and paste the following code into your text editor (notepad)

CODE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Change Font Size Smaller Bigger Example Sample Javascript Script With Code</title>
<script type="text/javascript">
var min=12;
var max=24;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 5;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 5;
      }
      p[i].style.fontSize = s+"px"
   }   
}
</script>
</head>

<body>

<br />
<div align="center"><a href="javascript:decreaseFontSize();">Smaller Font Size</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:increaseFontSize();">Larger Font Zise</a>
</div>
<hr />
<p align="center">Wallpaperama Rocks!! </p>
<div align="center">
  Copyright &copy; 2007 Wallpaperama - All Rights Reserved<br />
  Hosting Provided by <a href="http://www.webune.com">Webune.com</a>
</div>
</body>
</html>


2. step two is to paste the above code into notepad and save it as font-size.html

3. upload this file into your website and open it with your browser and see it in action.

Our friends at www.webune.com have provided us with hosting space to show you how this script works, of course, its more exciting when you open it from your very own website, but if you don't have one, click on the link below to see a demo


if you have any questions, please post them here. the guys at webune.com are very helpful and will be glad to answer any questions you may have.