Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery

Category > JQUERY || Published on : Wednesday, February 24, 2016 || Views: 9603 || Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery


Introduction

Here Pawan Kumar will explain how to Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery

Description

In previous post I have explained jQuery Code To Select Multiple Item By Pressing Ctrl Button In Asp.Net, How to bind dropdown list with XML file in asp.net?, Validate ASP.Net form using CSS in C#, API Demonstration ASP.NET, Age Calculator using ASP.NET & C#, How to Access AppSettings in Code Behind File, and many more articles.

Now I will explain How to Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery

So follow the steps to learn Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery

Complete ASP.NET webpage code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 16px;
        }
        
        .fontbtn
        {
            width: 40px;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            padding: 5px;
            cursor: pointer;
        }
        .plus
        {
            background-color: green;
        }
        .minus
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <a class="fontbtn plus">A+</a> <a class="fontbtn minus">A-</a>
    <hr />
    <div id="contentdiv">
        ASP.NET is an open source server-side Web application framework designed for Web
        development to produce dynamic Web pages. It was developed by Microsoft to allow
        programmers to build dynamic web sites, web applications and web services.
    </div>
    <script type="text/javascript">
        $(function () {
            $(".fontbtn").bind("click", function () {
                var size = parseInt($('#contentdiv').css("font-size"));
                if ($(this).hasClass("plus")) {
                    size = size + 1;
                } else {
                    size = size - 1;
                    if (size <= 10) {
                        size = 10;
                    }
                }
                $('#contentdiv').css("font-size", size);
            });
        });
    </script>
</body>
</html>

Output:-

Conclusion:

So, In this tutorial we have learned, Increse Decrease Font Size or Zoom In Zoom Out Text Size Using jQuery

Download Source Codes