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.
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
|
|
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 Email
|
|||
1 comments :
Good Job
Note: Only a member of this blog may post a comment.