This article will show you how you can create an animated resizable
message board using jQuery
in asp.net. In this we will learn how to create jQuery animated
resizable panel or div control on mouse click in asp.net.
Some of my previous articles are as follows: Theme
Creation for jQuery Mobile, Move
ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, jQuery
Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net,
Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net,
Validate
DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net, Bind
and Validate GridView TextBox Value by jQuery In Asp.Net Using C#, Add,
Remove, Validate CSS Class Applied To a HTML Control In Asp.Net Using jQuery.
So for this article first we will create a new asp.net application and add the below reference in header of the page.
So for this article first we will create a new asp.net application and add the below reference in header of the page.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
In above I have added the jQuery library reference and jQuery ui css reference. Now add the below jQuery code in header of the page.
<script>
$(function () {
$("#resizable-div").resizable({
animate: true
});
});
</script>
|
In above code I have used jQuery resizable
function and set the animation property true so that whenever user resize the panel
it get resized with some animation effect. Here is the compete code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animated
Resizable Panel OR Div Control On Mouse Click In Asp.Net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.fontsize {
font-size: 11px;
}
#resizable-div {
width: 130px;
height: 130px;
padding: 0.5em;
}
#resizable-div h3 {
text-align: center;
margin: 0;
}
.ui-resizable-helper {
border: 1px dotted gray;
}
</style>
<script>
$(function () {
$("#resizable-div").resizable({
animate: true
});
});
</script>
</head>
<body>
<div id="resizable-div"
class="ui-widget-content">
<h3 class="ui-widget-header">Message Board</h3>
<br />
<div>This is a message
board.</div>
</div>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view