magiccontrolhandler - replacement for AJAX Toolkit ResizableControlExtender and
DragPanelExtender
layouthandler.js
<%@ Page Language="C#" %>
<!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>MagicControlHandler</title>
<script src="MagicControlHandler.js" type="text/javascript"></script>
<link href="MagicControlHandler.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.MagicControlWidth, .MagicControlHeight, .MagicControlSize, .MagicControlWidthScroll, .MagicControlHeightScroll, .MagicControlSizeScroll, .MagicControlMove, .MagicControlAll, .MagicControlAllScroll
{
border: solid 1px grey;
}
.ScrollBox
{
min-width: 200px;
min-height: 100px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Postback Button" />
<input runat="server" id="MagicControl" type="text" style="width: 800px;" />
<br />
<br />
<table border="1">
<tr>
<td class="MagicControlWidth" title="MagicControlWidth">
Column with Dynamic Width
</td>
<td class="MagicControlWidth" title="MagicControlWidth">
Column with Dynamic Width
</td>
</tr>
<tr>
<td>
aaa bbb ccc ddd eee fff
</td>
<td>
111 222 333 444 555 666
</td>
</tr>
</table>
<br />
<table border="1" class="MagicControlHeight" title="MagicControlHeight">
<tr>
<td>
Table with Dynamic Height
</td>
<td>
qqq www eee rrr ttt yyy
</td>
</tr>
<tr>
<td>
aaa bbb ccc ddd eee fff
</td>
<td>
111 222 333 444 555 666
</td>
</tr>
</table>
<br />
<table border="1" class="MagicControlSize" title="MagicControlSize">
<tr>
<td>
Table with Dynamic Width and Height
</td>
<td>
qqq www eee rrr ttt yyy
</td>
</tr>
<tr>
<td>
aaa bbb ccc ddd eee fff
</td>
<td>
111 222 333 444 555 666
</td>
</tr>
</table>
<br />
<table border="1" class="MagicControlMove" title="MagicControlMove" style="top: 400px;
left: 50px;">
<tr>
<td>
Movable Table
</td>
<td>
drag upper area with mouse
</td>
</tr>
<tr>
<td>
aaa bbb ccc ddd eee fff
</td>
<td>
111 222 333 444 555 666
</td>
</tr>
</table>
<br />
<table border="1" class="MagicControlAll" title="MagicControlAll" style="top: 500px;
left: 50px;">
<tr>
<td>
Movable and Resizable Table
</td>
<td>
drag upper area with mouse
</td>
</tr>
<tr>
<td>
aaa bbb ccc ddd eee fff
</td>
<td>
111 222 333 444 555 666
</td>
</tr>
</table>
<br />
<div class="MagicControlAll" title="MagicControlAll" style="top: 100px; left: 500px;
width: 500px; height: 400px; background-color: #cccccc;">
Movable and Resizable Panel / DIV element
<div class="MagicControlAllScroll ScrollBox" title="MagicControlAllScroll ScrollBox"
style="top: 50px; left: 50px; width: 300px; height: 100px; background-color: #dddddd;">
<div class="ScrollBox" style="width: 100%; height: 100%; overflow: auto;">
Movable and Resizable Panel / DIV element with scrolling content, minimum size limit applied
<p>
aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb
ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd
eee fff aaa bbb ccc ddd eee fff
</p>
<p>
111 222 333 444 555 666 111 222 333 444 555 666 111 222 333 444 555 666 111 222
333 444 555 666 111 222 333 444 555 666 111 222 333 444 555 666 111 222 333 444
555 666 111 222 333 444 555 666
</p>
</div>
</div>
<div class="MagicControlAll" title="MagicControlAll" style="top: 200px; left: 100px;
width: 300px; height: 100px; background-color: #eeeeee">
Movable and Resizable Panel / DIV element
<p>
aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb
ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd eee fff aaa bbb ccc ddd
eee fff aaa bbb ccc ddd eee fff
</p>
<p>
111 222 333 444 555 666 111 222 333 444 555 666 111 222 333 444 555 666 111 222
333 444 555 666 111 222 333 444 555 666 111 222 333 444 555 666 111 222 333 444
555 666 111 222 333 444 555 666
</p>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
Sys.Application.add_load(MagicControlInitialize);
</script>
</form>
</body>
</html>