Post
Ask Question

Changing Size of The Text Using JQuery

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.
  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.
img1.gif
 
Step 2: Secondly you have to add a new page to the website.
  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add a new item.
  • Add a new web page and give it a name.
  • Click OK.
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


Similar Articles