Introduction

This article will show you how to allow visitors to increase or decrease the text size (font size) on your website using jQuery and CSS step by step.
Step 1: First we have to create a Web Application.
img1.gif
Step 2: Secondly you have to add a new page to the website.
img2.gif
img3.gif
Step 3 : In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.
  1. <style type="text/css">
  2. html
  3. {
  4. font-size: 1em;
  5. font-family: Arial, Helvetica, sans-serif;
  6. color: #FFCC99;
  7. }
  8. body
  9. {
  10. background-color: #CC99CC;
  11. }
  12. .pixels
  13. {
  14. font-size: 16px;
  15. line-height: 30px;
  16. margin-bottom: 20px;
  17. padding: 20px;
  18. background-color: #666000;
  19. }
  20. .point
  21. {
  22. font-size: 12pt;
  23. line-height: 30px;
  24. margin-bottom: 20px;
  25. padding: 20px;
  26. background-color: #666000;
  27. }
  28. .em
  29. {
  30. font-size: 1em;
  31. margin-bottom: 20px;
  32. padding: 20px;
  33. background-color:#666000;
  34. }
  35. .percentage
  36. {
  37. font-size: 100%;
  38. margin-bottom: 20px;
  39. padding: 20px;
  40. background-color:#666000;
  41. }
  42. .undefined
  43. {
  44. margin-bottom: 20px;
  45. padding: 20px;
  46. background-color: #666000;
  47. }
  48. #changeFont
  49. {
  50. position: absolute;
  51. top: 10px;
  52. right: 10px;
  53. background-color:#339966;
  54. padding: 5px;
  55. }
  56. .increaseFont, .decreaseFont, .resetFont
  57. {
  58. color: white;
  59. font-size: 14px;
  60. float: left;
  61. margin: 10px;
  62. }
  63. </style>
Step 4: In this step, we have to write the script reference to the aspx page; let us see from where you have to write the script code.
img4.jpg
Right-click on both files respectively -> copy and paste it inside <Head> section of your page; see step 5.
Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in <head> section or the <body> section as you prefer.
  1. <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  2. <script type="text/javascript" src="Scripts/Jquery.js"></script>
Step 6: In this step we have to write the JavaScript code which is given below.
  1. <script type="text/javascript" language="javascript">
  2. $(document).ready(function () {
  3. // Reset Font Size
  4. var originalFontSize = $('html').css('font-size');
  5. $(".resetFont").click(function () {
  6. $('html').css('font-size', originalFontSize);
  7. });
  8. // Increase Font Size
  9. $(".increaseFont").click(function () {
  10. var currentFontSize = $('html').css('font-size');
  11. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  12. var newFontSize = currentFontSizeNum * 1.2;
  13. $('html').css('font-size', newFontSize);
  14. return false;
  15. });
  16. // Decrease Font Size
  17. $(".decreaseFont").click(function () {
  18. var currentFontSize = $('html').css('font-size');
  19. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  20. var newFontSize = currentFontSizeNum * 0.8;
  21. $('html').css('font-size', newFontSize);
  22. return false;
  23. });
  24. });
  25. </script>
Step 7: In this step you will see the body code of the Default2.aspx page which is given below.
Code:
  1. <body>
  2. <h1>
  3. A Sample Demo</h1>
  4. <div class="pixels">
  5. Hello and thank you for visiting the Mindcracker Network</div>
  6. <div class="point">
  7. The Mindcracker Network with its global headquarters in Philadelphia </div>
  8. <div class="em">
  9. PA was founded in 1999 with a single goal in mind - to provide an online platform for Information </div>
  10. <div class="percentage">
  11. Technology Professionals to exchange their knowledge and experience
  12. </div>
  13. <div class="undefined">
  14. by teaching and learning from one another by using various interactive online methods such as contributing articles,
  15. </div>
  16. <div id="changeFont">
  17. <a href="#" class="increaseFont">Increase</a> <a href="#" class="decreaseFont">Decrease</a>
  18. <a href="#" class="resetFont">Reset</a>
  19. </div>
  20. </body>
Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.
Code:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title>How to Resize Text Using jQuery</title>
  6. <style type="text/css">
  7. html
  8. {
  9. font-size: 1em;
  10. font-family: Arial, Helvetica, sans-serif;
  11. color: #FFCC99;
  12. }
  13. body
  14. {
  15. background-color: #CC99CC;
  16. }
  17. .pixels
  18. {
  19. font-size: 16px;
  20. line-height: 30px;
  21. margin-bottom: 20px;
  22. padding: 20px;
  23. background-color: #666000;
  24. }
  25. .point
  26. {
  27. font-size: 12pt;
  28. line-height: 30px;
  29. margin-bottom: 20px;
  30. padding: 20px;
  31. background-color: #666000;
  32. }
  33. .em
  34. {
  35. font-size: 1em;
  36. margin-bottom: 20px;
  37. padding: 20px;
  38. background-color:#666000;
  39. }
  40. .percentage
  41. {
  42. font-size: 100%;
  43. margin-bottom: 20px;
  44. padding: 20px;
  45. background-color:#666000;
  46. }
  47. .undefined
  48. {
  49. margin-bottom: 20px;
  50. padding: 20px;
  51. background-color: #666000;
  52. }
  53. #changeFont
  54. {
  55. position: absolute;
  56. top: 10px;
  57. right: 10px;
  58. background-color:#339966;
  59. padding: 5px;
  60. }
  61. .increaseFont, .decreaseFont, .resetFont
  62. {
  63. color: white;
  64. font-size: 14px;
  65. float: left;
  66. margin: 10px;
  67. }
  68. </style>
  69. <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
  70. <script type="text/javascript" src="Scripts/Jquery.js"></script>
  71. <script type="text/javascript" language="javascript">
  72. $(document).ready(function () {
  73. // Reset Font Size
  74. var originalFontSize = $('html').css('font-size');
  75. $(".resetFont").click(function () {
  76. $('html').css('font-size', originalFontSize);
  77. });
  78. // Increase Font Size
  79. $(".increaseFont").click(function () {
  80. var currentFontSize = $('html').css('font-size');
  81. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  82. var newFontSize = currentFontSizeNum * 1.2;
  83. $('html').css('font-size', newFontSize);
  84. return false;
  85. });
  86. // Decrease Font Size
  87. $(".decreaseFont").click(function () {
  88. var currentFontSize = $('html').css('font-size');
  89. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  90. var newFontSize = currentFontSizeNum * 0.8;
  91. $('html').css('font-size', newFontSize);
  92. return false;
  93. });
  94. });
  95. </script>
  96. <head>
  97. <body>
  98. <h1>
  99. A Sample Demo</h1>
  100. <div class="pixels">
  101. Hello and thank you for visiting the Mindcracker Network</div>
  102. <div class="point">
  103. The Mindcracker Network with its global headquarters in Philadelphia </div>
  104. <div class="em">
  105. PA was founded in 1999 with a single goal in mind - to provide an online platform for Information </div>
  106. <div class="percentage">
  107. Technology Professionals to exchange their knowledge and experience
  108. </div>
  109. <div class="undefined">
  110. by teaching and learning from one another by using various interactive online methods such as contributing articles,
  111. </div>
  112. <div id="changeFont">
  113. <a href="#" class="increaseFont">Increase</a> <a href="#" class="decreaseFont">Decrease</a>
  114. <a href="#" class="resetFont">Reset</a>
  115. </div>
  116. </body>
  117. </html>
Step 9: In this step we will see the design of the Default2.aspx page which is given below.
img5.jpg
Step 10: In this step, we are going to run the Default2.aspx page by pressing F5.
img6.jpg
To increase the font of the text click on 'Increase'.
img7.jpg
img8.jpg
To reset the size of the text click on 'Reset'.
img9.jpg
To decrease the size of the text click on 'Decrease'.
img10.jpg
img11.jpg
Resources