<html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
div{width:100px;height:100px;left:100px;top:100px;position:absolute;border:1px solid gray;overflow:hidden}
</style>
<script type="text/javascript" language="javascript">
function makeResizable(obj){
var d=5;
var l,t,r,b,ex,ey,cur;
obj.attachEvent("onmousedown",mdown);
obj.attachEvent("onmouseup",mup);
obj.attachEvent("onmousemove",mmove);
function mdown(){
if(event.button==1&&obj.style.cursor){
obj.resizing=true;
obj.setCapture();
}
}
function mup(){
if(event.button==1&&obj.resizing){
obj.resizing=false;
obj.releaseCapture();
}
}
function mmove(){
if(obj.resizing){
var dx=event.screenX-ex;
var dy=event.screenY-ey;
if(cur.indexOf("w")>-1) l+=dx;
else if(cur.indexOf("e")>-1) r+=dx;
if(cur.indexOf("n")>-1) t+=dy;
else if(cur.indexOf("s")>-1) b+=dy;
var s=obj.style;
if(r-l>2*d){
s.left=l;
s.width=r-l;
}
if(b-t>2*d){
s.top=t;
s.height=b-t;
}
ex+=dx;
ey+=dy;
}
else if(event.srcElement==obj){
var x=event.offsetX,y=event.offsetY;
var c=obj.currentStyle;
w=parseInt(c.width),h=parseInt(c.height);
cur=y<d?"n":h-y<d?"s":"";
cur+=x<d?"w":w-x<d?"e":"";
if(cur){
obj.style.cursor=cur+"-resize";
l=parseInt(c.left);
t=parseInt(c.top);
r=l+w;
b=t+h;
ex=event.screenX;
ey=event.screenY;
}
else if(obj.style.cursor)
obj.style.cursor="";
}
}
}
</script>
</head>
<body οnlοad="makeResizable(odiv1);makeResizable(odiv2)";>
<div id="odiv1"></div>
<div id="odiv2" style="left:300px"></div>
</body>
</html>
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
div{width:100px;height:100px;left:100px;top:100px;position:absolute;border:1px solid gray;overflow:hidden}
</style>
<script type="text/javascript" language="javascript">
function makeResizable(obj){
var d=5;
var l,t,r,b,ex,ey,cur;
obj.attachEvent("onmousedown",mdown);
obj.attachEvent("onmouseup",mup);
obj.attachEvent("onmousemove",mmove);
function mdown(){
if(event.button==1&&obj.style.cursor){
obj.resizing=true;
obj.setCapture();
}
}
function mup(){
if(event.button==1&&obj.resizing){
obj.resizing=false;
obj.releaseCapture();
}
}
function mmove(){
if(obj.resizing){
var dx=event.screenX-ex;
var dy=event.screenY-ey;
if(cur.indexOf("w")>-1) l+=dx;
else if(cur.indexOf("e")>-1) r+=dx;
if(cur.indexOf("n")>-1) t+=dy;
else if(cur.indexOf("s")>-1) b+=dy;
var s=obj.style;
if(r-l>2*d){
s.left=l;
s.width=r-l;
}
if(b-t>2*d){
s.top=t;
s.height=b-t;
}
ex+=dx;
ey+=dy;
}
else if(event.srcElement==obj){
var x=event.offsetX,y=event.offsetY;
var c=obj.currentStyle;
w=parseInt(c.width),h=parseInt(c.height);
cur=y<d?"n":h-y<d?"s":"";
cur+=x<d?"w":w-x<d?"e":"";
if(cur){
obj.style.cursor=cur+"-resize";
l=parseInt(c.left);
t=parseInt(c.top);
r=l+w;
b=t+h;
ex=event.screenX;
ey=event.screenY;
}
else if(obj.style.cursor)
obj.style.cursor="";
}
}
}
</script>
</head>
<body οnlοad="makeResizable(odiv1);makeResizable(odiv2)";>
<div id="odiv1"></div>
<div id="odiv2" style="left:300px"></div>
</body>
</html>