/resizeThis

Ambition-less jQuery plugin for resizable DOM elements.

Primary LanguageJavaScript

Resize This!

Light-weight jQuery plugin to enable resizing of DOM elements. Leverage native CSS resize property when available. Compatible with Browserify (CommonJS) and RequireJS (AMD). Demo here.

Demo page essentially ripped off from: draggable.js. Background pattern from Colorlovers

Instructions

  • Add the CSS and JS files to your script (Browserfiy and Require should work)
  • Just grab an element with jQuery and Initialize the plugin:
var $resizable = $( '#myElement' ).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' );
});

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
});

Options Defaults

var defaults = {
    noNative: false,
    minSize: 10,
    maxSize: Number.POSITIVE_INFINITY,
}

If you need to override default settings (for instance in a testing environment) you can use the static method:

$.fn.resizeThis._setDefaults( newDefaultsObject )

To-do

  • Test multiple enviroments
  • Test multiple browsers
  • Add support for multiple types of handles

Tests

HERE

☠☠☠

This code is not throuroughly tested. If you find any issues, please report. I'll address them in a jiffy. Thanks!