Resize This - Resizable DOM elements

Download   Demo

Resize This is a light-weight jQuery plugin to enable resizing of DOM elements. Leverage native CSS resize property when available. Compatible with Browserify (CommonJS) and RequireJS (AMD).

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../resizeThis.css">
<script src="js/jquery2.js"></script>
<script src="../resizeThis.js"></script>

2. HTML

<div id="native">
	<span>Look, Native CSS resize ( <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize#Browser_compatibility">support</a>)</span>
	<p></p>
</div>

3. JAVASCRIPT

$(function() 
	var $resizable = $( '#native' ).resizeThis();

	// Register Event listners like so
	$resizable.on( 'rt:start', function() 
		console.log( 'resizing' );
	);

	$resizable.on( 'rt:stop', function( evt ) 
		console.log( 'stoping' );
	);

	$resizable.on( 'rt:resizing', function( evt ) 
		console.log( 'resizing' );
	);
);

4. OPTIONS

var $resizable = $( '#myElement' ).resizeThis(
 noNative: true, // Forces the plugin to use Javascript Implementation of resize
 minSize: 40, // Positive Integer to represent the minimal height and width that the element can be reiszed to
 maxSize: 40, // Positive Integer to represent the maximal height and width that the element can be reiszed to
);

Resize This - Resizable DOM elements