Make your DIVs Resizeable

1   <div id='foo'>
2     <div id='bar'>...</div>
3     ...
4   </div>
5 
6   new Draggable('foo');
7   new Resizeable('foo');


1   <div id=‘foo’>
2     <div id=‘bar’>…</div>
3     …
4   </div>
5 
6   new Draggable(‘foo’);
7   new Resizeable(‘foo’);



This works nicely:

1   <div id='foo'>
2     <div id='bar'>...</div>
3     ...
4   </div>
5 
6   new Draggable('foo', {handle: 'bar'});
7   new Resizeable('foo');


1   <div id=‘foo’>
2     <div id=‘bar’>…</div>
3     …
4   </div>
5 
6   new Draggable(‘foo’, {handle: ‘bar’});
7   new Resizeable(‘foo’);



There aren’t many options for this object, but here they are:
The grab areas can be defined with top, left, bottom, right.  Each defaults to 6 pixels.  If you set this to 0 (zero), then resize in that direction will be disabled.

1   <div id='foo'>
2     <div id='bar'>...</div>
3     ...
4   </div>
5 
6   new Resizeable('foo', {top: 0, left:50} );


A callback function can be defined that will be called when the resize is over.

 1   <div id='foo'>
 2     <div id='bar'>...</div>
 3     ...
 4   </div>
 5 
 6   new Resizeable('foo', {resize: function(el) {
 7       alert('Done!');
 8     }
 9   } );


The minimum height and width of the DIV can be specified as minHeight and minWidth options.
The resizable code in action – view source to see how it works.
The Javascript source file can be downloaded here
Currently, this code doesn’t quite work in IE (the DIV can jiggle around a little), but Firefox 1.0 is working Ok.
      

      

      
     
     blog comments powered by Disqus