How to Make Text Resizer Using HTML JavaScript

Submitted by alpha_luna on Monday, June 1, 2015 - 22:39.
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. 
  1. <link href="css/style.css" rel="stylesheet" type="text/css" />
  2.  
  3. <script type="text/javascript" src="js/script.js">
  4. </script>
This is the file for <link href="css/style.css" rel="stylesheet" type="text/css" /> (style.css) 
  1. .x_small{ /*CSS for "extra small font" setting*/
  2. font-size: 11px;
  3. }
  4.  
  5. .small{ /*CSS for "small font" setting*/
  6. font-size: 13px;
  7. }
  8.  
  9. .normal{ /*CSS to return page to default setting (with no additional CSS rules added)*/
  10. }
  11.  
  12. .large{ /*CSS for "large font" setting*/
  13. font-size: 21px;
  14. }
  15.  
  16. .x_large{ /*CSS for "extra large font" setting*/
  17. font-size: 24px;
  18. }
  19.  
  20. a.texttoggler{ /*CSS for Text Size Toggler control*/
  21. margin-right: 6px;
  22. }
  23.  
  24. a.texttoggler img{ /*CSS for Text Size Toggler control*/
  25. border: 1px solid gray;
  26. }
  27.  
  28. a.texttoggler img:hover{ /*CSS for Text Size Toggler control*/
  29. border: 1px solid red;
  30. }
  31.  
  32. a.selectedtoggler img{ /*CSS for Selected Text Size Toggler control*/
  33. border: 1px solid red;
  34. }
This one for the <script type="text/javascript" src="js/script.js"></script> (script.js). 
  1. var documenttextsizer={
  2.  
  3. prevcontrol: '', //remember last control clicked on/ selected
  4. existingclasses: '',
  5.  
  6. setpageclass:function(control, newclass){
  7. 	if (this.prevcontrol!='')
  8. 			this.css(this.prevcontrol, 'selectedtoggler', 'remove') //de-select previous control, by removing 'selectedtoggler' from it
  9. 	document.documentElement.className=this.existingclasses+' '+newclass //apply new class to document
  10. 	this.css(control, 'selectedtoggler', 'add') //select current control
  11. 	this.setCookie('pagesetting', newclass, 5) //remember new class added to document for 5 days
  12. 	this.prevcontrol=control
  13. },
  14.  
  15. css:function(el, targetclass, action){
  16. 	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
  17. 	if (action=="check")
  18. 		return needle.test(el.className)
  19. 	else if (action=="remove")
  20. 		el.className=el.className.replace(needle, "")
  21. 	else if (action=="add")
  22. 		el.className+=" "+targetclass
  23. },
  24.  
  25. getCookie:function(Name){ 
  26. 	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
  27. 	if (document.cookie.match(re)) //if cookie found
  28. 		return document.cookie.match(re)[0].split("=")[1] //return its value
  29. 	return null
  30. },
  31.  
  32. setCookie:function(name, value, days){
  33. 	if (typeof days!="undefined"){ //if set persistent cookie
  34. 		var expireDate = new Date()
  35. 		var expstring=expireDate.setDate(expireDate.getDate()+days)
  36. 		document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
  37. 	}
  38. 	else //else if this is a session only cookie
  39. 		document.cookie = name+"="+value
  40. },
  41.  
  42. setup:function(targetclass){
  43. 	this.existingclasses=document.documentElement.className //store existing CSS classes on HTML element, if any
  44. 	var persistedsetting=this.getCookie('pagesetting')
  45. 	var alllinks=document.getElementsByTagName("a")
  46. 	for (var i=0; i<alllinks.length; i++){
  47. 		if (this.css(alllinks[i], targetclass, "check")){
  48. 			if (alllinks[i].getAttribute("rel")==persistedsetting) //if this control's rel attribute matches persisted doc CSS class name
  49. 				this.setpageclass(alllinks[i], alllinks[i].getAttribute("rel")) //apply persisted class to document
  50. 			alllinks[i].onclick=function(){
  51. 				documenttextsizer.setpageclass(this, this.getAttribute("rel"))
  52. 				return false
  53. 			}
  54. 		}
  55. 	}
  56. }
  57.  
  58. }
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. 
  1. <p>Select your desired text size.</p>
  2.  
  3. <a href="#" class="texttoggler" rel="x_small" title="extra small size"><img src="image/x_small.png" /></a> 
  4. <a href="#" class="texttoggler" rel="small" title="small size"><img src="image/small.png" /></a> 
  5. <a href="#" class="texttoggler" rel="normal" title="normal size"><img src="image/normal.png" /></a> 
  6. <a href="#" class="texttoggler" rel="large" title="large size"><img src="image/large.png" /></a> 
  7. <a href="#" class="texttoggler" rel="x_large" title="extra large size"><img src="image/x_large.png" /></a>
  8.  
  9. <p>Do you have source code, articles, tutorials, web links, 
  10. <br />and books to share? You can write your own content here. 
  11. <br />You can even have your own blog. Submit now. </p>
  1. <script type="text/javascript">
  2. documenttextsizer.setup("texttoggler")
  3. </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: 
  1. <a href="#" class="texttoggler" rel="x_small" title="extra small size"><img src="image/x_small.png" /></a> 
  2. <a href="#" class="texttoggler" rel="small" title="small size"><img src="image/small.png" /></a> 
  3. <a href="#" class="texttoggler" rel="normal" title="normal size"><img src="image/normal.png" /></a> 
  4. <a href="#" class="texttoggler" rel="large" title="large size"><img src="image/large.png" /></a> 
  5. <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: 
  1. .x_small{ /*CSS for "extra small font" setting*/
  2. font-size: 11px;
  3. }
  4.  
  5. .small{ /*CSS for "small font" setting*/
  6. font-size: 13px;
  7. }
  8.  
  9. .normal{ /*CSS to return page to default setting (with no additional CSS rules added)*/
  10. }
  11.  
  12. .large{ /*CSS for "large font" setting*/
  13. font-size: 21px;
  14. }
  15.  
  16. .x_large{ /*CSS for "extra large font" setting*/
  17. font-size: 24px;
  18. }
And that's all!!! The user can set his/her desired font-size document of a current site using the controls. I hope this simple work, may help you in your project. Practice, and enjoy coding!!!

Tags

Add new comment

About text formats
  • 204 views