V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2019 Application Form 2019 Colleges Entrance Exam 2019 Results 2019 Notification 2019 University Educational Jobs 2019 Government Jobs 2019

Search This Blog v24s guys

15 April, 2013

jQuery Increase Decrease Font Size of Website Dynamically in Asp.net

Introduction

Here I will explain how to increase or decrease font size of website dynamically 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 increase or 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.

Popular Posts

Recent Posts

Google Analytics