Demos resizable

Basic

Resize an element as you like. Set min size and max size. Press "esc" key for cancel resizing. Press "Shift" when resizing to preserve aspect ratio.

$('#demo-1').clayfy({
    type : 'resizable',
    minSize : [30,50],
    maxSize : [600,300]
});

Aspect Ratio and Events.

Force to preserve aspect ratio. Also, you can bind some events, as 'clayfy-resize' (triggered when element is been resizing) and 'clayfy-cancel' (triggered when you press esc key)

var $demo2 = $('#demo-2');
var writeSize = function(){
    $demo2.html( $demo2.width() + ' x '+ $demo2.height() )
};

$demo2.clayfy({
    type : 'resizable',
    minSize : [30,50],
    maxSize : [600,300],
    preserveAspectRatio : true
});
$demo2.on('clayfy-resize clayfy-cancel', writeSize);

writeSize();

Resize only by right border.

Select on which border find resizing handlers. Also, you can set move false.

$('#demo-3').clayfy({
    type : 'resizable',
    move: false,
    top: false,
    left: false,
    bottom: false,
    minSize : [30,50],
    maxSize : [600,300],
});

Container and Callbacks.

Set a container. Also, instead of bind events, you can set callbacks.

var $demo4 = $('#demo-4');
$demo4.clayfy({
    type : 'resizable',
    container : '#container-4',
    minSize : [100,100],
    maxSize : [600,300],
    callbacks : {
        resize : function(){
            $demo4.html( 'inner: ' + $demo4.width() + ' x '+ $demo4.height() +'
outer: ' + $demo4.outerWidth() + ' x '+ $demo4.outerHeight());
        }
    }
});

Outer handlers.

When you resize even with borders, padding, and scrollbars.

<style>
    #demo-5{
        border: 4px solid #38c429;
        overflow:scroll
    }
</style>

<script>
    var $demo4 = $('#demo-4');
    $demo4.clayfy({
        type : 'resizable',
        container : '#container-4',
        minSize : [100,50],
        maxSize : [200,120],
        callbacks : {
            resize : function(){
                $demo4.html( 'inner: ' + $demo4.width() + ' x '+ $demo4.height() +'
outer: ' + $demo4.outerWidth() + ' x '+ $demo4.outerHeight());
            }
        }
    });
</script>

Styling.

Style as you like. We recommend you to use ::after and ::before pseudo classes.

<style>
    .custom-handlers.clayfy-top:after,
    .custom-handlers.clayfy-bottom:after,
    .custom-handlers.clayfy-left:after,
    .custom-handlers.clayfy-right:after
    {
        content: '';
        position: absolute;
        height: 2px;
        top:0;left:0;
        width:100%;
        background: red;
    }
    .custom-handlers.clayfy-bottom:after{
        top:auto; bottom: 0;
    }
    .custom-handlers.clayfy-left:after{
        width:2px; height:100%;
    }
    .custom-handlers.clayfy-right:after{
        width:2px; height:100%;
        right: 0; left:auto;
    }
    .custom-handlers.right:after,
    .custom-handlers.left:after
    {
        height: 100%;
    }
</style>

<script>
    var $demo6 = $('#demo-6');
    $demo6.clayfy({
        type : 'resizable',
        container : '#container-6',
        minSize : [100,50],
        maxSize : [200,120],
        className : 'custom-handlers',
        callbacks : {
            resize : function(){
                $demo6.html( 'inner: ' + $demo6.width() + ' x '+ $demo6.height() +'
outer: ' + $demo6.outerWidth() + ' x '+ $demo6.outerHeight());
            }
        }
    });
    $demo6.on('clayfy-cancel', function(){
        $demo6.html( 'inner: ' + $demo6.width() + ' x '+ $demo6.height() +'
outer: ' + $demo6.outerWidth() + ' x '+ $demo6.outerHeight());
    });
</script>