Web Page Text Resizing Example Using Javascript , HTML and CSS

Using Javascript to resize web page text.

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.


More by this Author


Comments 6 comments

Ryan 7 years ago

Nice Article,

Ryan,http://www.surveyrapid.com


cheater2478 profile image

cheater2478 7 years ago from Acworth, Georgia

Definitely usefull for when people who have trouble reading small lettering are viewing your site. The only problem is that the size of how far the text's width can be needs to be extended a lot. It also should be setup to where both buttons are usable at all times. Only someone who has experience with web designing would be able to fix that on their own. Beyond that, it is a great script.


Mac Mission profile image

Mac Mission 7 years ago from bangalore

I was searching for you all these days where were you .........? I love this articles and hubs which you publish.........


tonyhubb profile image

tonyhubb 7 years ago

Thanks for such a great article.


Silviya Howe 6 years ago

Thank you, it waorking perfect


hammerj01 profile image

hammerj01 3 years ago from Cebu City

these article is very interesting to read..I'll look further more about your article...great one..

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Did this help you?

    Did this help you?

    • Yes
    • No
    See results without voting
    Click to Rate This Article
    working