A small JS library to convert any HTML element into a resizable element.
- Vanilla JS
- Support images
- Support Shift key to keep ratio
- Support touch events
NPM
$ npm install set-resizable --save
CDN
https://cdn.jsdelivr.net/npm/set-resizable/dist/set-resizable.min.js
or just download the dist file: set-resizable.min.js
ES6:
import Resizable from 'set-resizable';
var element = document.querySelector('#element');
var options = {
active: true
}
var resizable = new Resizable(element, options);Script tag:
<!DOCTYPE html>
<html>
...
<script src="https://cdn.jsdelivr.net/npm/set-resizable/dist/set-resizable.min.js"></script>
<script>
var element = document.querySelector('#element');
var options = {
active: true
}
var resizable = new Resizable(element, options);
</script>
</html>| Parameter | Default | Description |
|---|---|---|
| active | false | Auto enable resizing. |
| activeEvent | "click" | Event to listen for enable resizing. |
| color | "blue" | Set CSS color property for accent element. |
| info | true | Visibility of width and height data values. |
| minSize | "40px" | Minimun value for width and height resize. |
| overflow | "auto" | Set CSS overflow property for element. |
| Name | Parameters | Description |
|---|---|---|
| activate | void | Enable resizing |
| deactivate | void | Disable all instances of Resizable |
| resize | (width,height) | Apply resizing with input parameters |
| Name | Description |
|---|---|
| onactivate | Returns the activated instance |
| onresize | Returns an object with the new width and new height upon completion of the resize. |
var resizable = new Resizable(document.querySelector('#image'));
console.log(resizable);
resizable.activate();
resizable.resize(200,200);
resizable.onresize = function(data) {
console.log("onresize", data);
}