jQuery Resizer

Inside our current cms we utilise a jQuery resize tool for stretching out our content entry area. However, it is a bit clunky and and the large size (9k) doesn’t help matters.

Time to make a new one….

Simple Resizable Div

If you click and drag inside the red box below it will grow until you let go.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer').resize();
  });  
  </script>

Resizable Div With Max Limits

If you click and drag inside the red box below it will grow until it reaches a max width and height.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer_maxed').resize({x:450, y:300});
  });  
  </script>

Resizable Div With Max and Min Limits

If you click and drag inside the red box below it will grow until it reaches a max width and height.

It will not resize below a certain amount.

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resizer_min_max').resize({x:450,min_width:190, y:300, min_height:90});
  });  
  </script>

Resizable Div – Turning Off A Direction

By passing in false you can turn of expansion in either direction

Fixed width

Fixed height

  <script type="text/javascript">
  jQuery(document).ready(function() {
  	jQuery('#resize_no_x').resize({x:false});	
  	jQuery('#resize_no_y').resize({y:false});
  });  
  </script>

Resizable Div – Targets

If you use a target then the resize is based on where you drag the trigger element.

< ^ v >

  <script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('#resize_bar').resize({target:'#resizer_area'});
  });  
  </script>