Category >
JQUERY
|| Published on :
Wednesday, February 24, 2016 || Views:
10518
||
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