How to Change the Font Size of the Web Page Using JQuery


Introduction  : 
                       Hi, Here i will code you how to increase the font size of the Web page from Client side using JQuery. Here i use a div tag where Content is placed inside it, and two buttons texted as '+' and '-' both Used to increase and decrease the Font size respectively in their Client events.Here I use JQuery 1.7 google CDN, it also works in JQuery 1.4,

Logic  : 
             Here i have declared default size 13 on each '+' button Click i have increased the font size to +1 and in each '-' Click i have decreased Font size to -1,Soon After increasing or decreasing the font size i have applied the font size to the '<div>' which the content is placed.
 Example: $(".divtag").css("font-size", size);

Asp Code (with JQuery) : 

<html>
<head id="Head1" runat="server">
<title>Fourthbottle</title>
<style type="text/css">
.divtag
{
    width:250px;
    text-align:center;
}
</style>

<script type="text/javascript" src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js> </script>
<script type="text/javascript">
$(document).ready(function () {
 var defaultSize = 13;
 var size = defaultSize + "px";
 $(".divtag").css("font-size", size);
 $('#ZoomIn').click(function () {
 defaultSize = defaultSize + 1;
 var size = defaultSize + "px";
 $(".divtag").css("font-size", size);
 return false;
 });
 $('#ZoomOut').click(function () {
 defaultSize = defaultSize - 1;
 var size = defaultSize + "px";
 $(".divtag").css("font-size", size);
 return false;
 });
});
</script>

</head>
<body>
<form id="form1" runat="server">
<div align="center">
<div class="divtag">
Fourth Bottle is a Site that Gives you the Reference code for your Doubts and Clarifications. it mainly deals with Asp.net also contains the content of JQuery and SQL server.
Fourth Bottle contains rare and  Complicated code.
</div>
<asp:Button ID="ZoomIn" runat="server" Text="+" Font-Bold="true" />
<asp:Button ID="ZoomOut" runat="server" Text="-" Font-Bold="true" />
</div>
</form>
</body>
</html>