hcg-resizable - Live Demo

Interactive demos of hcg-resizable, a lightweight zero-dependency JavaScript library for resizable elements. Every option is shown below: handles, minWidth, minHeight, maxWidth, maxHeight, aspectRatio, containment, disabled, data-hcg-* attributes, option() / setOption(), contain(), lifecycle callbacks, and instance methods. Version . hcg-resizable - Full documentation

1. All handles

Default setup enables all eight edge and corner handles: n, e, s, w, ne, se, sw, nw.

Try it
All handles
View usage code 
new HcgResizable('#box-all', {
  onStart(event, size) { console.log('start', size); },
  onEnd(event, size)   { console.log('end', size.width, size.height); }
});

2. Corner only (se)

Pass a handles array to enable only the handles you need. Here only the bottom-right corner is active.

Try it
Corner (se)
View usage code 
new HcgResizable('#box-corner', {
  handles: ['se']
});

3. East and west edges only

Resize horizontally without changing height. North and west handles also adjust top and left so the opposite edge stays anchored.

Try it
East / west
View usage code 
new HcgResizable('#box-edges', {
  handles: ['e', 'w']
});

4. Aspect ratio locked

aspectRatio: true locks the width/height ratio present when the resize starts.

Try it
Aspect ratio
View usage code 
new HcgResizable('#box-aspect', {
  aspectRatio: true,
  onResize(event, size) {
    console.log(size.width, size.height);
  }
});

5. Fixed aspect ratio (16 / 9)

Pass a number for a fixed ratio (width divided by height). Useful for video or image crop UIs.

Try it
16 : 9
View usage code 
new HcgResizable('#box-aspect-num', {
  aspectRatio: 16 / 9
});

6. Containment (parent)

containment: 'parent' clamps size so the element cannot grow past the dashed stage edges.

Try it
Contained
View usage code 
new HcgResizable('#box-bounded', {
  containment: 'parent'
});

var stage = document.getElementById('stage');
new HcgResizable('#box', { containment: stage });

7. Min and max size

Clamp width and height while dragging. This box stays between 80×60 px and 220×180 px.

Try it
Min / max
View usage code 
new HcgResizable('#box-minmax', {
  minWidth: 80,
  minHeight: 60,
  maxWidth: 220,
  maxHeight: 180
});

8. setSize() and getSize()

Set or read dimensions programmatically. setSize also writes data-hcg-size on the element.

Try it

Current size: -

setSize

View usage code 
var resize = new HcgResizable('#box-setsize');

resize.setSize(180, 120);
var size = resize.getSize(); // { width: 180, height: 120 }

9. disable() and enable()

Turn resizing off without destroying the instance. Handles stay in the DOM but ignore pointer input.

Try it

Resizing: enabled

Toggle me

View usage code 
var resize = new HcgResizable('#box-toggle');

resize.disable();
resize.enable();
resize.destroy();

10. Data attributes

Add data-hcg-resizable and option attributes in HTML, then call HcgResizable.init() once your DOM is ready.

Try it
data-hcg-*
View usage code 
<div
  data-hcg-resizable
  data-hcg-handles="se"
  data-hcg-min-width="80"
  data-hcg-min-height="60"
  data-hcg-max-width="200"
  data-hcg-max-height="160">
  data-hcg-*
</div>

HcgResizable.init();

11. setOption() at runtime

Change handles, min/max, or aspect ratio on a live instance with setOption(name, value). Read values with option(name).

Try it

handles: se | aspectRatio: false

setOption

View usage code 
var r = new HcgResizable('#box', { handles: ['se'] });

r.setOption('handles', ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw']);
r.setOption('aspectRatio', true);
r.option('minWidth'); // getter

12. Containment selector

Pass a CSS selector string to containment, not only 'parent'.

Try it
#selector-stage
View usage code 
new HcgResizable('#box', {
  containment: '#selector-stage'
});

13. contain() on window resize

Resize the box to the right edge, then make the browser window narrower. contain() runs automatically on window resize when containment is set.

Try it
Resize window
View usage code 
var r = new HcgResizable('#box', {
  containment: '#resize-stage'
});
r.contain(); // manual re-clamp

14. Multiple elements

When a selector matches several nodes, the factory returns an array of instances.

Try it
Multi A
Multi B
Multi C

View usage code 
var items = HcgResizable('.box-multi', { handles: ['se'] });
if (Array.isArray(items)) {
  items.forEach(function (r) { r.disable(); });
}

Event log

Lifecycle callbacks from every demo above are logged here in real time.

Callbacks