In previous posts, I explained Drag and drop HTML list item with in list using jQuery, jQuery Magnifier Example. Now , I will show you a simple example of resizable div using jQuery in ASP.Net.
We can create a resizable div just by simple call the resizable() property of jQuery UI library that would be like as shown below.
Here is a simple example of resizable div.
Demo-
We can create a resizable div just by simple call the resizable() property of jQuery UI library that would be like as shown below.
<script type="text/javascript">
$(document).ready(function () {
$("#demodiv").resizable();
});
</script>
Here is a simple example of resizable div.
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeBehind="Default.aspx.cs"
Inherits="ResizabeDiv._Default"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Resizable Div</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css"
type="text/css"
media="all"
/>
<style type="text/css">
#demodiv
{
height:200px;
width:200px;
background-color:Gray;
border:1px solid black;
}
p
{
color:White;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#demodiv").resizable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="demodiv">
<p>
Resize the div</p>
</div>
</form>
</body>
</html>
Demo-
No comments:
Post a Comment