Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Change Text Size (Zoom in and Zoom out Text) with Example

Aug 12, 2015
Introduction

Here I will explain how to change text size using jQuery or zoom in and zoom out text using jQuery  or increase or decrease font size of website dynamically on button click using
jQuery in asp.net.

Description:
  
In previous articles I explained
Redirect to another page after some time delay, jQuery slideUp slideDown toggle effects, Cross page postback in asp.net and many articles relating to JQuery and asp.net. Now I will explain how to zoom in and zoom out text size or increase and decrease font size of website dynamically using jQuery in asp.net.

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


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>increase or decrease font size of website in asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var divtxt = $('#fontdiv');
// Increase Font Size
$('#btnincfont').click(function() {
var curSize = divtxt.css('fontSize');
var newSize = parseInt(curSize.replace("px", "")) + 1;
$(divtxt).css("fontSize", newSize + "px");
});
// Decrease Font Size
$('#btndecfont').click(function() {
var curSize = divtxt.css('fontSize');
var newSize = parseInt(curSize.replace("px", "")) - 1;
$(divtxt).css("fontSize", newSize + "px");
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="fontdiv">
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
</div><br />
<input type="button" id="btnincfont" value=" + " />
<input type="button" id="btndecfont" value=" - " />
</form>
</body>
</html>

Live Demo

To check Live demo click on below button buttons


Increase or Decrease Font Size Example



Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
Welcome to Aspdotnet-Suresh.com. Welcome to Aspdotnet-Suresh.com.
 

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Raj said...

Good Job

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.