V24s

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

Search This Blog v24s guys

Follow by Email

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