Make your DIVs Resizeable

<!--adsense-->

I love using Scriptaculous for its effects and drag/drop. However, I need to have my DIVs be resizable too. To make this happen, I’ve written a class called Resizeable that can be added to a DIV in the same way that Draggable can be.

This code is standalone (it needs Prototype, but not Scriptaculous), and it can be used with Draggable with one note: The Draggable handle cannot be the element that is Resizeable, you must specify a handle element when you create a Draggable to avoid confusion between Draggable and Resizeable.

This doesn’t work very well 
  <div id='foo'>
    <div id='bar'>...</div>
    ...
  </div>

  new Draggable('foo');
  new Resizeable('foo');
This works nicely: 
  <div id='foo'>
    <div id='bar'>...</div>
    ...
  </div>

  new Draggable('foo', {handle: 'bar'});
  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.

  <div id='foo'>
    <div id='bar'>...</div>
    ...
  </div>

  new Resizeable('foo', {top: 0, left:50} );

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

  <div id='foo'>
    <div id='bar'>...</div>
    ...
  </div>

  new Resizeable('foo', {resize: function(el) {
      alert('Done!');
    }
  } );

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.

This entry was posted on Fri, 02 Dec 2005 06:50:00 GMT . You can follow any any response to this entry through the Atom feed. You can leave a comment or a trackback from your own site.
Tags


Trackbacks

Use the following link to trackback from your own site:
http://blog.craz8.com/trackbacks?article_id=make-your-divs-resizeable&day=01&month=12&year=2005

Comments

Leave a response

  1. Matt about 1 year later:

    Any progress on IE support for this script?

  2. Matt about 1 year later:

    Another way of making snap work correctly (above solution isn’t perfect =) (and also make it snap in all different directions)

    Like the above solution, add snap: null to options list in initialize.

    In the function draw, after variable initialization, add: 
        if (this.options.snap) {
      pointer[0] = Math.round(pointer[0] / this.options.snap) * this.options.snap;
      pointer[1] = Math.round(pointer[1] / this.options.snap) * this.options.snap;
    }

    And that’s it, you now have snap support.

  3. Rhodus about 1 year later:

    This is fantastic! It’s just as usable and stable as the stuff in Scriptaculous!

    Although I’ve managed to hack one in myself, how about a “duringresize” callback? I use it to automatically resize a hidden under my resizeable . (For IE’s “SELECT lists display through floating DIVs” problem.)

  4. Victor about 1 year later:

    dear sir I have some trouble when using your scripts. But I’m not sure it is the problem of IE or not. When the direction that I’m pulling is the bottom..then the content in the DIV will not follow. would you feel free to take a look on it?

    #test{ position:absolute; width:250px; height:200px; top:0px; left:0px; border:1px solid black; background-color:blue; }

    #handle{ background-color:#CCCCCC; height:20px; }

    #tools{ background-color:purple; height:20px; } #content{ background-color:red; position:absolute; top:20px; bottom:0px; left:0px; right:0px; } #item{ background-color:yellow; overflow:auto; position:absolute; top:20px; bottom:0px; left:0px; right:0px; }

    • html #content{ height:100%; position:relative; top:0px; }
    • html #item{ height:100%; position:relative; top:0px; }

      title

      Toolsbar
123123123123123123123123123123123123123123

    new Draggable(“test”,{handle:’handle’}); new Resizeable(“test”,{minWidth:’150’,minHeight:’100’});

  5. tom about 1 year later:

    @Rhodus:

    I did leverage the draggable code from Scriptaculous to make Resizable, I find it’s the best way to build something new when I’m learning.

  6. Rhodus about 1 year later:

    My amazement with this thing keeps increasing! Why isn’t it included in the Scriptaculous builds?! Anyway, to hack in a “duringresize” callback simply do the following:

    Insert “duringresize: null” after “resize: null” at the end of the “var options = Object.extend” options list (this is at the start of the file).

    Finally, insert:

    ” if(this.options.duringresize) { this.options.duringresize(this.element); } “

    after “this.draw(event)” in the update() function.

    This definitely enables an iframe hidden under a div to be automatically resized when the covering div is resized. It may enable embedded YouTube videos to be resized.

    Embedded Google Video videos can be resized with the standard code! But that makes me realize a “keepAspectRatio” feature would be cool ;-)

  7. tom about 1 year later:

    I’m glad you’re liking it!

    I like the idea of resizing video – video is the current big thing, so it’s good to be on the leading edge with code that’s a year and a half old.

  8. John about 1 year later:

    It seems that it works in IE7 just fine (as well as Firefox 2).

  9. Victor about 1 year later:

    Excuse me, can anyone provide a fully example of during resize case??? I know how to edit the resize.js but I don’t know how to use it.

    also could anyone can give me some hits about, how to make the resize function with a ghost effect??? my div contain many things, so it is very slow if I resize the DIV dynamical, so I would like to use a ghost effect to reduce the calculation during resizing.

  10. Geoffrey about 1 year later:

    Hi, your effect is great but how can I make it resize dynamicly when cliking a link for example ? I would like the DIV the resize itself by some pixels I define.

    Thanks

  11. ostghost about 1 year later:

    as 14 On March 31st, 2007, John wrote at least in ie7 and ff2 works well and what´s best – it´s the simplest solution to resize table by drag n drop thanks nice work

  12. ostghost about 1 year later:

    uff man your kind of wizzard – also in ie6 works on table resizing well only opera 9.0 confused me little – make column / td larger works but smaller no but it´s unimportant for me at this moment and maybe tomorrow with new fresh eyes i will fix it :-)

  13. fritz about 1 year later:

    And where is the code?

    Thanks

  14. tom about 1 year later:

    There’s a link towards the end of the post, where it says ‘dowload here’

  15. Chiara about 1 year later:

    Hey Sir!

    I found your script and I managed to make it work well with resizing my divs, just as you show it in here. But I’m really trying hard to make it work with draggable too and it never works =( What should I include in my page as scripts? You resize and Prototype? Or also scriptaculous? And then I didn’t get how to apply the thing with the handle that it has to be different! Do I need then a DIV “handle” to use the drag thing inside the DIV i want to move/resize? Thanx so much! Chiara

  16. Mehran Taheri about 1 year later:

    Take a look at this address http://www.twinhelix.com/javascript/dragresize/demo/

Leave a comment