// the class
var Resizable=new Class({Extends:Drag,options:{limit:{x:[0,null],y:[0,null]},mode:'horizontal',addToResizableLimits:true,cookie:false},initialize:function(element,options){this.parent(element,options);this.parentElement=this.element.getParent();if(this.options.mode=='horizontal'){this.isHorizontal=true;this.options.modifiers.y=false;this.firstProperty='width';this.handleSize=this.element.getSize().x;if(this.options.invert){this.first=this.element.getNext();this.second=this.element.getPrevious();this.secondProperty='right';this.options.modifiers.x='right';}else{this.first=this.element.getPrevious();this.second=this.element.getNext();this.secondProperty='left';this.options.modifiers.x='left';}}else{this.isHorizontal=false;this.options.modifiers.x=false;this.firstProperty='height';this.handleSize=this.element.getSize().y;if(this.options.invert){this.first=this.element.getNext();this.second=this.element.getPrevious();this.secondProperty='bottom';this.options.modifiers.y='bottom';}else{this.first=this.element.getPrevious();this.second=this.element.getNext();this.secondProperty='top';this.options.modifiers.y='top';}}
if(this.options.addToResizableLimits){(this.isHorizontal)?ResizableLimits.horizontal.include(this):ResizableLimits.vertical.include(this);}
if(this.options.cookie){this.setFromCookie();this.addEvent('complete',this.setCookie.bind(this));}},drag:function(event){this.parent(event);if(this.isHorizontal){this.distance=(this.options.invert)?this.parentElement.getSize().x-this.element.getPosition(this.parentElement).x-(this.handleSize*2):this.element.getPosition(this.parentElement).x-this.handleSize;}else{this.distance=(this.options.invert)?this.parentElement.getSize().y-this.element.getPosition(this.parentElement).y-this.handleSize:this.element.getPosition(this.parentElement).y;}
this.set(this.distance,true);return this;},set:function(distance,fromDrag){this.first.setStyle(this.firstProperty,distance);this.second.setStyle(this.secondProperty,distance+this.handleSize);if(!fromDrag)this.element.setStyle(this.secondProperty,distance);this.fireEvent('set');return this;},setFromCookie:function(){var cookie=Cookie.read(this.options.cookie);if(cookie)this.set(cookie.toInt());return this;},setCookie:function(){Cookie.write(this.options.cookie,this.distance,{duration:30});return this;}});var ResizableLimits=new Hash({horizontal:[],vertical:[],setLimits:{all:function(){ResizableLimits.setLimits.vertical();ResizableLimits.setLimits.horizontal();return ResizableLimits;},horizontal:function(){ResizableLimits.horizontal.each(function(instance,index){if(instance.options.invert){var previous=ResizableLimits.horizontal[index-1];var limit=(previous)?instance.parentElement.getSize().x-previous.element.getPosition(instance.parentElement).x-(instance.handleSize*3):false;}else{var next=ResizableLimits.horizontal[index+1];var limit=(next)?next.element.getPosition(instance.parentElement).x-(instance.handleSize*2):false;}
if(limit)instance.options.limit.x[1]=limit;});return ResizableLimits},vertical:function(){ResizableLimits.vertical.each(function(instance,index){if(instance.options.invert){var previous=ResizableLimits.vertical[index-1];var limit=(previous)?instance.parentElement.getSize().y-previous.element.getPosition(previous.parentElement).y-(instance.handleSize*2):false;}else{var next=ResizableLimits.vertical[index+1];var limit=(next)?next.element.getPosition(next.parentElement).y-instance.handleSize:false;}
if(limit)instance.options.limit.y[1]=limit;});return ResizableLimits;}},attach:function(){ResizableLimits.setLimits.all();ResizableLimits.horizontal.each(function(instance){instance.addEvent('complete',ResizableLimits.setLimits.horizontal);});ResizableLimits.vertical.each(function(instance){instance.addEvent('complete',ResizableLimits.setLimits.vertical);});window.addEvent('resize',ResizableLimits.setLimits.all);return ResizableLimits}});
// usage
window.addEvent('domready',function(){
leftResize = new Resizable('left_handle',{
limit: {x: [50,null]},
cookie: 'leftResize'
});
rightResize = new Resizable('right_handle',{
invert: true,
cookie: 'rightResize'
});
centerTopResize = new Resizable('center_top_handle',{
mode: 'vertical',
cookie: 'centerTopResize'
});
centerBottomResize = new Resizable('center_bottom_handle',{
invert: true,
mode: 'vertical',
cookie: 'centerBottomResize'
});
ResizableLimits.attach();
});
<div id="container">
<div id="left" class="content">
<h1>Resize.js Test / Demo</h1>
<h3>Horizontally resizable from left</h3>
<ul>
<li>Handles should stop at window edges</li>
<li>Handles should stop at other handles</li>
<li>Resizing the window should reset those limits</li>
<li>Resizing the window will, however, allow handles to overlap, not sure how to handle that yet</li>
</ul>
</div>
<div id="left_handle" class="handle horizontal"></div>
<div id="center">
<div id="center_top" class="content">
<h3>Vertically resizable from top</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="center_top_handle" class="handle vertical"></div>
<div id="center_middle" class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="center_bottom_handle" class="handle vertical"></div>
<div id="center_bottom" class="content">
<h3>Vertically resizable from bottom</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
<div id="right_handle" class="handle horizontal"></div>
<div id="right" class="content">
<h3>Horizontally resizable from right</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
/* @group other */
body {
font-family: helvetica, verdana;
background: #e8e8e8;
color: #333;
}
.highlight {
color: #3875d7;
}
h1, h2 {
color: #888;
}
li {
margin-bottom: .5em;
}
body {
margin: 0;
overflow: hidden;
font-size: 12px;
}
h1, h3, p {
padding: 10px;
}
ul {
margin-left: 2em;
}
li {
list-style: square;
}
div#center div.content {
background: #fff;
}
p {
color: #a8a8a8;
}
/* @end */
/* @group handle styles */
div.handle {
background: #333 url(http://ryanflorence.com/scripts/mootools/Resizable/test/grip.png) no-repeat;
z-index: 2;
position: absolute;
}
div.handle.horizontal {
top: 0;
bottom: 0;
width: 9px;
cursor: col-resize;
background-position: 2px center;
}
div.handle.vertical {
width: 100%;
height: 9px;
cursor: row-resize;
z-index: 1;
background-position: center -19px;
}
/* @end */
/* @group Blocks */
div.content {
overflow: auto;
}
div#container {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background: #fff;
border: solid 9px #ccc;
overflow: auto;
}
div#left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100px;
z-index: 0;
}
div#left_handle {
left: 100px;
}
div#center {
position: absolute;
left: 109px;
top: 0;
bottom: 0;
right: 109px;
overflow: hidden;
background: #fff;
z-index: 1;
}
div#center_top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
}
div#center_top_handle {
top: 100px;
}
div#center_middle {
position: absolute;
top: 109px;
left: 0;
right: 0;
bottom: 109px;
}
div#center_bottom_handle {
bottom: 100px;
}
div#center_bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
}
div#right_handle {
right: 100px;
}
div#right {
position: absolute;
right: 0;
width: 100px;
top: 0;
bottom: 0;
z-index: 0;
}
/* @end */