How to Increase or Decrease Font Size of Website Using jQuery?

Development a website with multiple features are the dreams of every client and one of the feature among them in providing PLUS or MINUS button on any corner to increase or decrease font-size of all the HTML tags (currently viewing page).

Main concern behind this feature is the readability on big screen or small screen.

So to add this feature, you need to add the below snippet which is self-explanatory. Let us know in comment if you have any issue in implementing this feature for your or client website.

<script type="text/javascript">
   var $affectedElements = $("p, span, a, h1, h2, h3, h4, h5, h6");

   $affectedElements.each( function(){
    var $this = $(this);
    $this.attr("orig-size", $this.css("font-size") );
   });
  
  
  $(".increase-font-size").click(function(){
    $affectedElements.each( function(){
      var $this = $(this);
      var new_font_size = parseInt($this.attr("orig-size"))+parseInt(2);
      $this.css( "font-size" , new_font_size + 'px' );
    });
  });


  $(".decrease-font-size").click(function(){
    $affectedElements.each( function(){
      var $this = $(this);
      var new_font_size = parseInt($this.attr("orig-size"))-parseInt(2);
      if(new_font_size > 0)
        $this.css( "font-size" , new_font_size + 'px' );
    });
  });
</script>

Another jquery code snippet to use with HTML structure ready is as follow

<html xmlns="http://www.w3.org/1999/xhtml" >
   <head runat="server">
      <title>Increase and Decrease Font Using Jquery and CSS</title>
      <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"><
         /script>   
         
          <script type="text/javascript">
         $(document).ready(function(){        
           var originalSize = $('div').css('font-size');         
          // reset        
           $(".resetMe").click(function(){           
          $('div').css('font-size', originalSize);         
           });
         
           // Increase Font Size          
           $(".increase").click(function(){         
          var currentSize = $('div').css('font-size');         
          var currentSize = parseFloat(currentSize)*1.2;          
          $('div').css('font-size', currentSize);         
          return false;          
          });        
      
           // Decrease Font Size       
           $(".decrease").click(function(){        
           var currentFontSize = $('div').css('font-size');        
           var currentSize = $('div').css('font-size');        
           var currentSize = parseFloat(currentSize)*0.8;        
           $('div').css('font-size', currentSize);         
           return false;         
           });         
         });
         
      </script>
   </head>
   <body>
      <input type="button" class="increase" value=" + ">
      <input type="button" class="decrease" value=" - "/>
      <input type="button" class="resetMe" value=" = ">
      <div>Click Respected Buttons to Increase or Decrease the Font </div>
   </body>
</html>
Source to above snippet

Leave a Comment

Your email address will not be published. Required fields are marked *