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>
<a href="javascript:increaseFontSize();">Larger Font Zise</a>
</div>
<hr />
<p align="center">Wallpaperama Rocks!! </p>
<div align="center">
Copyright © 2007 Wallpaperama - All Rights Reserved<br />
Hosting Provided by <a href="http://www.webune.com">Webune.com</a>
</div>
</body>
</html>
<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>
<a href="javascript:increaseFontSize();">Larger Font Zise</a>
</div>
<hr />
<p align="center">Wallpaperama Rocks!! </p>
<div align="center">
Copyright © 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
CLICK HERE TO SEE 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.
Quote:
window font size html font size css font size javascript image size javascript screen size div font size javascript font color ie font size table font size style font size browser font size javascript print td font size accessibility font size form font size javascript menu javascript style javascript html javascript properties javascript link iframe javascript change font size javascript popup select font size changing font size screen font size body font size smaller font size javascript text display font size input font size javascript button javascript div document javascript javascript select get javascript tag font size larger font size javascript window outlook size javascript frame javascript form link font size javascript input javascript browser javascript ie adjust font size text font size javascript body page font size dhtml javascript button font size increase size change javascript get font size default font size set font size javascript page make font size print font size menu font size setting font size big size code font size codes font size size large small size