Web Page Text Resizing Example Using Javascript , HTML and CSS

Today we are going to use Javascript to resize text on a web page, while the example is not a catch all example, it does illustrate what can be done using client scripting, the goal of this is not copy and paste, it is to give a little knowledge and use your imagination to what can be done.

First, create a simple web page and between the body tags write the following:

<ul>
<li><input id="size_1" name="size_1" type="button" onclick="incSize();" value="+"/>
</li>
<li><input id="size_2" name="size_2" type="button" onclick="decSize();" value="-" disabled="disabled"/>
</li>
</ul>
<div id="article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam erat. Cras aliquet feugiat orci. Sed quis nisi quis metus consectetur tristique. Mauris id lorem in felis ullamcorper vehicula. Sed semper velit vitae diam. Aenean sollicitudin. Integer cursus lorem placerat risus. Donec nunc leo, consectetur at, rutrum nec, pellentesque quis, felis. Mauris enim velit, consequat quis, molestie in, sagittis id, libero. Integer leo risus, luctus nec, condimentum quis, aliquet molestie, leo. Proin neque lectus, volutpat eget, laoreet eu, porta sit amet, est. Donec at risus a nunc molestie luctus. Cras scelerisque, est vitae elementum volutpat, ligula velit venenatis erat, scelerisque congue neque urna non velit.
</div>

Nothing special, just plain html, but look at these tags:

<li><input id="size_1" name="size_1" type="button" onclick="incSize();" value="+"/>
</li>
<li><input id="size_2" name="size_2" type="button" onclick="decSize();" value="-" disabled="disabled"/>
</li>

In bold they point to the onclick handler to a javascript function. We cannot go into detail about event handlers because that is beyond the scope of the article.

But here are the functions called incSize and decSize:

function incSize(){
var num = i++;
var div = document.getElementById("article");
if(maxTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= true;
document.getElementById("size_2").disabled= false;
return;
}
}

function decSize(){
var num = i--;
var div = document.getElementById("article");
if(minTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= false;
document.getElementById("size_2").disabled= true;
return;
}
}

Entire javascript:

<script>
var minTxtSize = 13;
var maxTxtSize = 25;
var i=13;

function incSize(){
var num = i++;
var div = document.getElementById("article");
if(maxTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= true;
document.getElementById("size_2").disabled= false;
return;
}
}

function decSize(){
var num = i--;
var div = document.getElementById("article");
if(minTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= false;
document.getElementById("size_2").disabled= true;
return;
}
}
</script>

Line by line:

var minTxtSize = 13; //we are setting a value for minimum text size
var maxTxtSize = 25; //we are setting a value for max text size
var i=13; //we are setting a value so we can increase the size (a counter to keep track)

function incSize(){//name of the function

var num = i++; // here we increase the counter and assign the value to a variable

var div = document.getElementById("article");//here are assigning the name of the html element the div container to a variable

if(maxTxtSize != i){// remember this all this does is if the max size does not equal the counter i keep raising the text size

div.style.fontSize = num + "px";// magic happens here the size of all the text in the div "artticles" are being increased

}else{

document.getElementById("size_1").disabled= true;//disable the button when we reach full text size

document.getElementById("size_2").disabled= false;//enable the button for text size reversal

return;//stop the script
}
}

The decrease function follows the same pattern and notes as above I will leave that up to you to mull through and look at the logic, the basic logic is, on page load the text is a certain size and the increase button is usable and the decrease button is unusable, after we start increasing the text size we enable the decrease button after we hit MAX size.

Plain and simple, here is the whole code base, take it, play with it and expand on the logic or just use it as is, your choice.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#article{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:450px;
clear:left;
margin:10px 0 0 0;
}
ul{list-style:none;}
li{display:inline;}
ul li a div{font-size:150%;font-weight:bold;border:1px dotted #ccc; background-color:#f1f1f1;padding:3px;width:25px;float:left;margin-left:10px;}
a{text-decoration:none;text-align:center;}
</style>
<script>
var minTxtSize = 13;
var maxTxtSize = 25;
var i=13;

function incSize(){
var num = i++;
var div = document.getElementById("article");
if(maxTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= true;
document.getElementById("size_2").disabled= false;
return;
}
}

function decSize(){
var num = i--;
var div = document.getElementById("article");
if(minTxtSize != i){
div.style.fontSize = num + "px";
}else{
document.getElementById("size_1").disabled= false;
document.getElementById("size_2").disabled= true;
return;
}
}
</script>
</head>

<body>
<ul>
<li><input id="size_1" name="size_1" type="button" onclick="incSize();" value="+"/>
</li>
<li><input id="size_2" name="size_2" type="button" onclick="decSize();" value="-" disabled="disabled"/>
</li>
</ul>
<div id="article">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam erat. Cras aliquet feugiat orci. Sed quis nisi quis metus consectetur tristique. Mauris id lorem in felis ullamcorper vehicula. Sed semper velit vitae diam. Aenean sollicitudin. Integer cursus lorem placerat risus. Donec nunc leo, consectetur at, rutrum nec, pellentesque quis, felis. Mauris enim velit, consequat quis, molestie in, sagittis id, libero. Integer leo risus, luctus nec, condimentum quis, aliquet molestie, leo. Proin neque lectus, volutpat eget, laoreet eu, porta sit amet, est. Donec at risus a nunc molestie luctus. Cras scelerisque, est vitae elementum volutpat, ligula velit venenatis erat, scelerisque congue neque urna non velit.
</div>
</body>
</html>

There you have it, a couple of things. The javascript may or may not work depending on the browser and the end user settings, and that is a whole other discussion, for now take care and thanks for reading.