How to Make Text Resizer Using HTML JavaScript

Users of a particular web page are sometimes bothered with the font size especially when they have problems with eyesight. Yet, this problems can be solved through this Text Resizer.

Text Resizer enables your user to change the font size in your website. The script is easy and works in any web page. You just have to add to any page one of the CSS classes (on the element itself). This process changes the font size of the website depending on the setting clicked on.

It is important for every page to have a Text Resizer for users to configure their desired font-size of the text.

Directions:

First: Kindly add this code below to the HEAD section of your page.



<link href="css/style.css" rel="stylesheet" type="text/css" />





<script type="text/javascript" src="js/script.js">


</script>

This is the file for <link href="css/style.css" rel="stylesheet" type="text/css" />(style.css)



.x_small{ /*CSS for "extra small font" setting*/


font-size: 11px;


}





.small{ /*CSS for "small font" setting*/


font-size: 13px;


}





.normal{ /*CSS to return page to default setting (with no additional CSS rules added)*/


}





.large{ /*CSS for "large font" setting*/


font-size: 21px;


}





.x_large{ /*CSS for "extra large font" setting*/


font-size: 24px;


}





a.texttoggler{ /*CSS for Text Size Toggler control*/


margin-right: 6px;


}





a.texttoggler img{ /*CSS for Text Size Toggler control*/


border: 1px solid gray;


}





a.texttoggler img:hover{ /*CSS for Text Size Toggler control*/


border: 1px solid red;


}





a.selectedtoggler img{ /*CSS for Selected Text Size Toggler control*/


border: 1px solid red;


}

This one for the <script type="text/javascript" src="js/script.js"></script>(script.js).



var documenttextsizer={





prevcontrol: '', //remember last control clicked on/ selected


existingclasses: '',





setpageclass:function(control, newclass){


if (this.prevcontrol!='')


this.css(this.prevcontrol, 'selectedtoggler', 'remove') //de-select previous control, by removing 'selectedtoggler' from it


document.documentElement.className=this.existingclasses+' '+newclass //apply new class to document


this.css(control, 'selectedtoggler', 'add') //select current control


this.setCookie('pagesetting', newclass, 5) //remember new class added to document for 5 days


this.prevcontrol=control


},





css:function(el, targetclass, action){


var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")


if (action=="check")


return needle.test(el.className)


else if (action=="remove")


el.className=el.className.replace(needle, "")


else if (action=="add")


el.className+=" "+targetclass


},





getCookie:function(Name){ 


var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair


if (document.cookie.match(re)) //if cookie found


return document.cookie.match(re)[0].split("=")[1] //return its value


return null


},





setCookie:function(name, value, days){


if (typeof days!="undefined"){ //if set persistent cookie


var expireDate = new Date()


var expstring=expireDate.setDate(expireDate.getDate()+days)


document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()


}


else //else if this is a session only cookie


document.cookie = name+"="+value


},





setup:function(targetclass){


this.existingclasses=document.documentElement.className //store existing CSS classes on HTML element, if any


var persistedsetting=this.getCookie('pagesetting')


var alllinks=document.getElementsByTagName("a")


for (var i=0; i<alllinks.length; i++){


if (this.css(alllinks[i], targetclass, "check")){


if (alllinks[i].getAttribute("rel")==persistedsetting) //if this control's rel attribute matches persisted doc CSS class name


this.setpageclass(alllinks[i], alllinks[i].getAttribute("rel")) //apply persisted class to document


alllinks[i].onclick=function(){


documenttextsizer.setpageclass(this, this.getAttribute("rel"))


return false


}


}


}


}





}

Second: Just simply add the control code to the BODY section of your page to toggle the size of the text, with 5 different text sizes offered.



<p>Select your desired text size.</p>





<a href="#" class="texttoggler" rel="x_small" title="extra small size"><img src="image/x_small.png" /></a> 


<a href="#" class="texttoggler" rel="small" title="small size"><img src="image/small.png" /></a> 


<a href="#" class="texttoggler" rel="normal" title="normal size"><img src="image/normal.png" /></a> 


<a href="#" class="texttoggler" rel="large" title="large size"><img src="image/large.png" /></a> 


<a href="#" class="texttoggler" rel="x_large" title="extra large size"><img src="image/x_large.png" /></a>





<p>Do you have source code, articles, tutorials, web links, 


<br />and books to share? You can write your own content here. 


<br />You can even have your own blog. Submit now. </p>



<script type="text/javascript">


documenttextsizer.setup("texttoggler")


</script>

This reference of 5 sample images used to controls the text size inside the sourcecode, which you can download below. Kindly click the ("Download Code").

How this script works?

This script works by applying to the document's in the element, the CSS class name specified in the text size control the user clicks on. The controls are simply links with a rel attribute pointing to the CSS class you want to apply in the document. We are here 5 sample controls:



<a href="#" class="texttoggler" rel="x_small" title="extra small size"><img src="image/x_small.png" /></a> 


<a href="#" class="texttoggler" rel="small" title="small size"><img src="image/small.png" /></a> 


<a href="#" class="texttoggler" rel="normal" title="normal size"><img src="image/normal.png" /></a> 


<a href="#" class="texttoggler" rel="large" title="large size"><img src="image/large.png" /></a> 


<a href="#" class="texttoggler" rel="x_large" title="extra large size"><img src="image/x_large.png" /></a>

By clicking the first control, it applies the CSS class x_small to the <HTML> element of your page and other controls. Which defines the CSS classes referenced by your controls:



.x_small{ /*CSS for "extra small font" setting*/


font-size: 11px;


}





.small{ /*CSS for "small font" setting*/


font-size: 13px;


}





.normal{ /*CSS to return page to default setting (with no additional CSS rules added)*/


}





.large{ /*CSS for "large font" setting*/


font-size: 21px;


}





.x_large{ /*CSS for "extra large font" setting*/


font-size: 24px;


}