How to increment or zoom in font size with jQuery ?

Some times we want place an option for all user in our web pages to view content according their preferable font size. Like some want to read the content by increasing or zoom in the font size and some others want to read that content by decreasing existing font size. No the question is How to increment or zoom in font size with jQuery ?

By Jquery we can easily implement this functionalities. Bellow i give a complete example zoom in and zoom out content by placing two action button. Where the zoom button will increase the content font size of

tag and the Zoom out button will decrease the font size of content of

tag which class is ‘mytext’.

Zoom in or increase font size function

var fontSize = parseInt($('.mytext').css("font-size"));
fontSize = fontSize + increaseAmount + "px"; // Set increase font size by change number.
$('.mytext').css({'font-size':fontSize});

Zoom out decrease font size function

var fontSize = parseInt($('.mytext').css("font-size"));
fontSize = fontSize - decreaseAmount + "px"; // Set decrease font size by change number.
$('.mytext').css({'font-size':fontSize});

Complete example of Jquery increase and decrease font size:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var increaseAmount = 1;
var decreaseAmount = 1;
$(document).ready(function(){
	$(".zoomin").click(function() {
		var fontSize = parseInt($('.mytext').css("font-size"));
		fontSize = fontSize + increaseAmount + "px"; // Set increase font size by change number.
		$('.mytext').css({'font-size':fontSize});
		// www.cakephpexample zoomin jquery example
	});
	$(".zoomout").click(function() {
		var fontSize = parseInt($('.mytext').css("font-size"));
		fontSize = fontSize - decreaseAmount + "px"; // Set decrease font size by change number.
		$('.mytext').css({'font-size':fontSize});
		// www.cakephpexample zoomout jquery example
	});
});

</script>

<button class='zoomin'>Zoom In</button>
<button class='zoomout'>Zoom Out</button>

<p class="mytext">
The content which i want to zoom in or zoom out i place in this paragraph, the class of this paragraph is 'mytext'. Whenever i press the Zoom Button it will increase the font-size 1 px in every single click, and reversely it will decrease the font-size 1px in every single click when i click the Zoom out button. You can customize your increase or decrease volume of your font size. 
</p>