Clay.js is a lightweight, event-based Javascript library for make your elements resizables

Installation

npm install clay.js
bower install clay

Demo

Basic usage:

var el1 = new Clay('.clay-1');
Resizeme
Lorem ipsum Ut laboris veniam incididunt id cupidatat.

Playing with the direction:

var el2 = new Clay('.clay-2', {resize: "vertical"});
var el3 = new Clay('.clay-3', {resize: "horizontal"});
Resizeme
Resizeme

Keeping the element layout agnostic:

var el4 = new Clay('.clay-4', {absolute: true});
Resizeme
Lorem ipsum Ut laboris veniam incididunt id cupidatat.

Events:

var el5 = new Clay('.clay-5');
      
el5.on('resize', function(size) {
  console.log(size.height, size.width);
});
Resizeme
Height: 150 Width: 150

All Options:

Name Value Description
absolute Boolean This makes the element to not interfere with the rest of the elements in the page.
resize String Limit the resize direction, values: "vertical", "horizontal".

All methods:

Name Params Description
on name, callback Adds a handler to the element (See the events table)
reset Restores the status of the element to their initial value.

All events:

Name Description
resize Fired when the size of the element changes.