Website text resize using Jquery

Published on : May 26, 2014

Author: Masum

Category: Jquery

Some times you need to resize website text size and you can do it easily using Jquery.

Some sample code for website text resize using Jquery

Increase font size for full page


function increaseFont()
{
   var currentFontSize = $('html').css('font-size');
   var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*1.2;
   $('html').css('font-size', newFontSize);
   return false;
}

Decrease font size for full page


function decreaseFont()
{
   var currentFontSize = $('html').css('font-size');
   var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*0.8;
   $('html').css('font-size', newFontSize);
   return false;
}

If you want to increase a particular DIV text size just follow as like below


function increaseDivFont()
{
   var currentFontSize = $('#slide p').css('font-size'); // #slide is your DIV name
   var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*1.2;
   $('#slide p').css('font-size', newFontSize);
   return false;
}

If you want to decrease a particular DIV font size just follow as like below


function decreaseDivFont()
{
   var currentFontSize = $('#slide p').css('font-size'); // #slide is your DIV name
   var currentFontSizeNum = parseFloat(currentFontSize, 10);
   var newFontSize = currentFontSizeNum*0.8;
   $('#slide p').css('font-size', newFontSize);
   return false;
}

Note: if you multiply current font size with greater than one that is increase and if you multiply current font size with less than one that is decrease