Home Web Development JavaScript jQuery Font Resize Program With Modify CSS Values | Change Font Size

jQuery Font Resize Program With Modify CSS Values | Change Font Size

January 10, 2020

3478

How we can resize or change the font size on the webpage by clicking? Solution: See this jQuery Font Resize Program With Modify CSS Values, Change Font Size.

Previously I have shared a font preview program using google font API, but this is about resizing font using the JS program. Basically, font-resize programs you will see in some article website, to increase and decrease sizes of fonts. There has dedicated navigation buttons to change font size according to the user’s choice. Sometimes we feel irritated when reading small or too big fonts, that’s why this feature is important.

Today you will learn to create the Change Font Size Program. Basically, there is a text block with a heading, a subheading, and some texts and on the right side of the box, there are 4 buttons with different sizes of “A” character. These buttons are for changing the font-size and the big and small “A” is for indicating the sizes. The buttons help the user to identify and change the font’s size.

So, Today I am sharing jQuery Font Resize Program With Modify CSS Values. There I have used jQuery for creating the program, but we playing with CSS values. As we know jQuery is a JS library, that’s why I am putting this in the JavaScript category. This is a good example for those people who are a beginner in Web Development. Also, You can use this program on your website.

If you are thinking now how this font resizes program actually is, then see the preview given below.

Preview Of Change Font’s Size Program

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/change-font-size.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Font Resize Program With Modify CSS Values Source Code

Before sharing source code, get the source code of it. First, I have created a main div named container, put another div section for controls, heading, subheading, and texts inside it. Inside the control div section, I have put 4 hyperlinks for 4 different sizes. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS, I have done basic works like size, position, margin, padding, etc to all the elements. In the controls button, I have put “A” and gave different font-sizes for indicating the works of the buttons. Which button has the small font, that button will reduce the font size after clicking and the bigger one will increase font-size.

jQuery handling here the main feature of the program, which is change font’s size. Basically, jQuery changing here the CSS values on the action, nothing else. I have jQuery’s $("#IDname").click command and gave values separately for each buttons. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating the program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resize Fonts jQuery | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div id="container">
  <div id="controls">
    <a href="#" id="small">A</a>
    <a href="#" id="medium" class="selected">A</a>
    <a href="#" id="large">A</a>
    <a href="#" id="max">A</a>
  </div>
<h1>Heading</h1>
<h2>Subheading</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.
</p>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Resize Fonts jQuery | Webdevtrick.com</title>

</head>

<body>

</div>

<h1>Heading</h1>

<h2>Subheading</h2>

<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.

</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put the codes given here.

*      {  margin:0; padding:0;
  font-family:Arial, Helvetica, sans-serif; text-decoration:none;}

body       {  background:#e7e7e7;}

#container   {  width:100%;
              max-width: 400px;
              margin: 0 auto;
              margin-top: 15%;
              padding:40px;
              background:#fff;
              box-shadow:0 0 50px 0 rgba(0,0,0,.25);}

#controls  {  float:right;
              padding:2px;
              width:25px;
              background:#333;
              position:fixed;
              margin:0 0 0 440px;
              text-align:center;
              transition:.25s ease-out;}

#controls a
           {  font-size:24px;
              color:#aaa;
              display:block;
              font-weight:bold;
              padding: 5px;}

#controls a:hover
           {  color:#fff;
              background:#000;
              transition:.25s ease-out;}

a.selected  {  background:#000;
               color:#fff !important;}

#small     {  font-size:10px !important;}
#medium    {  font-size:14px !important;}
#large     {  font-size:18px  !important;}
#max       {  font-size:24px  !important;}

.small     {  font-size:75%;}

h1         {  font-size:36px;
              font-weight:bold;}

h2         {  font-size:24px;
              margin: 10px 0;}
 
p          {  font-size:14px;
              line-height:20px;}
            
@media (max-width: 750px) {
   #container {
      width: 225px;
   }
   #controls {
      margin:0 0 0 265px;
   }
}

* { margin:0; padding:0;

font-family:Arial, Helvetica, sans-serif; text-decoration:none;}

body { background:#e7e7e7;}

#container { width:100%;

max-width: 400px;

margin: 0 auto;

margin-top: 15%;

padding:40px;

background:#fff;

box-shadow:0 0 50px 0 rgba(0,0,0,.25);}

#controls { float:right;

padding:2px;

width:25px;

background:#333;

position:fixed;

margin:0 0 0 440px;

text-align:center;

transition:.25s ease-out;}

#controls a

{ font-size:24px;

color:#aaa;

display:block;

font-weight:bold;

padding: 5px;}

#controls a:hover

{ color:#fff;

background:#000;

transition:.25s ease-out;}

a.selected { background:#000;

color:#fff !important;}

#small { font-size:10px !important;}

#medium { font-size:14px !important;}

#large { font-size:18px !important;}

#max { font-size:24px !important;}

.small { font-size:75%;}

h1 { font-size:36px;

font-weight:bold;}

h2 { font-size:24px;

margin: 10px 0;}

p { font-size:14px;

line-height:20px;}

@media (max-width: 750px) {

#container {

width: 225px;

}

#controls {

margin:0 0 0 265px;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

$(document).ready(function(){
  
  $("#small").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"24px"});
    $("h2").animate({"font-size":"16px"});
    $("p").animate({"font-size":"12px", "line-height":"16px"});
    
  });
  
  $("#medium").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"36px"});
    $("h2").animate({"font-size":"24px"});
    $("p").animate({"font-size":"14px", "line-height":"20px"});
    
  });
  
  $("#large").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"48px"});
    $("h2").animate({"font-size":"30px"});
    $("p").animate({"font-size":"16px", "line-height":"20px"});
    
  });
  
  $("#max").click(function(event){
    event.preventDefault();
    $("h1").animate({"font-size":"56px"});
    $("h2").animate({"font-size":"42px"});
    $("p").animate({"font-size":"24px", "line-height":"26px"});
    
  });

  $( "a" ).click(function() {
   $("a").removeClass("selected");
  $(this).addClass("selected");
  
 });

});

$(document).ready(function(){

$("#small").click(function(event){

event.preventDefault();

$("h1").animate({"font-size":"24px"});

$("h2").animate({"font-size":"16px"});

$("p").animate({"font-size":"12px", "line-height":"16px"});

});

$("#medium").click(function(event){

event.preventDefault();

$("h1").animate({"font-size":"36px"});

$("h2").animate({"font-size":"24px"});

$("p").animate({"font-size":"14px", "line-height":"20px"});

});

$("#large").click(function(event){

event.preventDefault();

$("h1").animate({"font-size":"48px"});

$("h2").animate({"font-size":"30px"});

$("p").animate({"font-size":"16px", "line-height":"20px"});

});

$("#max").click(function(event){

event.preventDefault();

$("h1").animate({"font-size":"56px"});

$("h2").animate({"font-size":"42px"});

$("p").animate({"font-size":"24px", "line-height":"26px"});

});

$( "a" ).click(function() {

$("a").removeClass("selected");

$(this).addClass("selected");

});

That’s It. Now you have successfully created jQuery Font Resize Program With Modify CSS Values, Change Font Size. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.