Very Simple jQuery UI Resizable Columns Technique

There are plenty of plugins that allow you to resize table columns while maintaining the same overall table width, however sometimes it would be useful to be able to do this with block elements such as divs, sections and so on.

The following is a stripped down version of what we use for creating page layouts in our Doozy CMS – this snippet is only intended as a very simple example and isn’t responsive, is pixel based and doesn’t use HTML 5 semantic elements. It requires jQuery and jQuery UI (resizable) so you’ll need to include those libraries to make it work.

Using this technique, you can:

  • Have any number of resizable columns in the containing element
  • Specify minimum and maximum column widths
  • Make columns snap to predefined widths when resizing

A little CSS…

  .container {width:960px; margin:100px auto;}
  .column {height:300px; float:left; margin:0;}
  .column-1 {background: #f8f8f6; width: 640px;}
  .column-2 {background: #e8e7e2; width: 320px}

 A bit of HTML…

<div class="container">
  <div class="column column-1"></div>
  <div class="column column-2"></div>
</div>

And some very simple jQuery to finish off.

var tot_width;
var min_width = 160;
jQuery('.container .column:not(:last-child)').resizable({
  grid : 80,
  minWidth : min_width,
  handles : 'e',
  start : function(){
    tot_width = jQuery(this).width() + jQuery(this).next().width();
    jQuery(this).resizable('option', 'maxWidth', (tot_width - min_width));
  },
  resize : function(){
    jQuery(this).next().width(tot_width - jQuery(this).width());
  }
});

And there you have it. Toss in a some PHP and a bit of ajax and this can be very useful indeed…

Leave a Reply

Your email address will not be published. Required fields are marked *