Categories: Uncategorized

CSS and JavaScript Code to increase and decrease font size of text.

To add functionality of increasing and decreasing size of text in the post you need the following codes.

let us suppose I have a content in a div whose id is “content”.

FOR DIV

<!-- BUTTON FOR INCREASING AND DECREASING -->
<div class="textcontrols">
<button id="decreasetext"> <span>A</span></button>
<button role="button" id="resettext"><span>A</span></button>
<button role="button" id="increasetext"><span>A</span></button>
</div>

<!-- BELOW IS THE PLACE WHERE YOU WANT TO PASTE YOUR CONTENT -->

<div id="content">
Put Your Content Here!!!
This Content has to be increased or decreads
Try pressing the buttons.
</div>

 

The second step is to style the button. Below is my style. You can change the style if you want.

<style type="text/css">

/* text-controls */.textcontrols {
padding: 0;
margin:10px 0;
/*background: #ccc;*/}

.textcontrols button {
vertical-align: bottom;
margin: 0 1px;
padding: 0 0.1125em;
background-color: #fff;
color: #e52b1e;
padding: 5px 10px;
font-weight: bolder;
-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
box-shadow: 0 0 10px 0 rgb(0 20 0 / 10%);

border:none;
border: 1px solid #999;
}
.textcontrols button:hover{
color:#fff;
background-color: #e52b1e;
}

button#increasetext {
font-size: 17px;
}

button#resettext {
font-size: 14px;

}

button#decreasetext {
font-size: 11px;

}


#content p{
text-align: justify;
line-height: 2rem ;

}

/* content */#content>* {
font-size: 18px;
}
/* demo container */</style>

 

Now the last part is to use javascript. I am using jquery for this. I have also put CDN link along with the code.

 

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript">
// Increase/descrease font size
$('#increasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) + 2;
if (curSize <= 32)
$('#content').css('font-size', curSize);
});
$('#resettext').click(function() {
if (curSize != 18)
$('#content').css('font-size', 18);
});
$('#decreasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) - 2;
if (curSize >= 10)
$('#content').css('font-size', curSize);
});

</script>

 

The complete Code looks like this

<!DOCTYPE html>
<html>
<head>
  <title>Increase And Decrease Conent By Buttons.</title>
   
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<style type="text/css">

/* text-controls */.textcontrols {
  padding: 0;
  margin:10px 0;
  /*background: #ccc;*/}

.textcontrols button {
  vertical-align: bottom;
  margin: 0 1px;
  padding: 0 0.1125em;
  background-color: #fff;
  color: #e52b1e;
    padding: 5px 10px;
    font-weight: bolder;
    -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 10px 0 rgb(0 20 0 / 10%);
   
    border:none;
    border: 1px solid #999;
}
.textcontrols button:hover{
  color:#fff;
  background-color: #e52b1e;
}

button#increasetext {
  font-size: 17px;
}

button#resettext {
  font-size: 14px;
  
}

button#decreasetext {
  font-size: 11px;
  
}


#content p{
    text-align: justify;
    line-height: 2rem ;

  }

/* content */#content>* {
  font-size: 18px;
}
/* demo container */</style>
</head>
<body>

  <!-- BUTTON FOR INCREASING AND DECREASING -->
<div class="textcontrols">
<button id="decreasetext"> <span>A</span></button>
<button role="button" id="resettext"><span>A</span></button>
<button role="button" id="increasetext"><span>A</span></button>
</div>

<div id="content">
    Put Your Content Here!!! 
    This Content has to be increased or decreads
    Try pressing the buttons.
</div>




</body>

<div id="container-fluid">

    <script type="text/javascript">
        // Increase/descrease font size
  $('#increasetext').click(function() {
    curSize = parseInt($('#content').css('font-size')) + 2;
    if (curSize <= 32)
      $('#content').css('font-size', curSize);
  });
  $('#resettext').click(function() {
    if (curSize != 18)
      $('#content').css('font-size', 18);
  });
  $('#decreasetext').click(function() {
    curSize = parseInt($('#content').css('font-size')) - 2;
    if (curSize >= 10)
      $('#content').css('font-size', curSize);
  });


    </script>

</html>

 

jaminrai

Recent Posts

Skype Closes Its Doors After 20 Years: A Look Back and the Apps That Faded with It

After 20 years of transforming global communication, Skype has officially ceased operations. Microsoft, which purchased…

2 months ago

The Duck and the Tortoise: A Tale of Patience and Teamwork

In a serene forest by the edge of a sparkling lake, there lived a cheerful…

3 months ago

10 Smart Strategies for a Secure and Enjoyable Retirement

Retiring comfortably is a goal many aspire to achieve, and with the right strategies, it’s…

3 months ago

Troubleshooting a Slow Computer

Is your computer running frustratingly slow? Don't worry; you're not alone in facing this common…

3 months ago

The Clever Fox and the Greedy Crow

Once, in a sunny forest, Fox and Crow were friends. One day, Crow found a…

3 months ago