ZoomIn and ZoomOut Text Example using JQuery

Jacob
JQUERY - August 15, 2015

ZoomIn and ZoomOut Text Example using JQuery

Introduction:

Here I will explain example of Text ZoomIn or ZoomOut example using JQuery or increase or decrease font size of blog/website dynamically on button click using jQuery in asp.net.

Description:

In previous articles I explained ajax password strength validator and checker. This all things are related to Jquery. To read more article about JQuery which is implemented in asp.net.

To implement this we need to write the following code in aspx page

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
var getdiv = $('#test');

//get zoomin button

$('#zoomin').click(function () {

var presentsize = getdiv.css('fontSize');
var latestsize = parseInt(presentsize.replace("px", "")) + 1;
$(getdiv).css("fontSize",latestsize + "px");

});

//get zoomout button

$('#zoomout').click(function () {

var presentsize = getdiv.css('fontSize');
var latestsize = parseInt(presentsize.replace("px", "")) - 1;
$(getdiv).css("fontSize", latestsize + "px");

});

})

</script>
</head>
<body>
<form id="form1" runat="server">
<div id="test">
Welcome to my blog: http://dotprogramming.blogspot.com

</div>
<input id="zoomin" type="button" value="+" />
<input id="zoomout" type="button" value="-" />
</form>
</body>
</html>