How to make this resizable div, resizable from edges?

Question

I have a resizable and draggable box (grey in color). The box can be resized by stretching it from its corners.

Currently the box can be resized only by stretching from corners. I want to be able to resize it also from edges. Stretching from corners makes it scale uniformly across width and height. However, scaling across one edge, would scale it along length only. While, scaling it across another edge, would scale it along width only. How do I achieve that?

My code is here. http://jsfiddle.net/akashdmukherjee/sa44ks9u/4/

HTML:

  <div id="outer" style="background-color: yellow; width: 600px; height: 400px; margin-left: 40px; margin-top: 50px;">


        <div class="draggable_div rot">
            <div class="rotatable">
                <div id="inner" class="resizable" style="background-color: #3C3C3C; width: 300px; height: 300px;">
                </div>
            </div>
        </div>

  </div>

  <div id="x_and_y_of_inner">Left: , Right: </div>

JS:

    $('.draggable_div').draggable();


    $( ".draggable_div" ).draggable({
      drag: function( event, ui ) {

        var left_most_cordinates = $("#outer").offset().left;
        var top_most_cordinates = $("#outer").offset().top;

        $("#x_and_y_of_inner").text( "Left: " + left_most_cordinates + " Top: " + top_most_cordinates );

        ui.position.left = Math.min( left_most_cordinates, ui.position.left );
        ui.position.top = Math.min( top_most_cordinates, ui.position.top );
      }
    });

    $('.resizable').resizable({
        aspectRatio: true,
        handles: 'ne, se, sw, nw'
    });



    $(document).on('mouseover', '.rot', function(){
        var tc = $(this);
        tc.rotatable({
            handle:tc.children('.rotate.left, .rotate.right')
        });
        return true;
    });

CSS:

.draggable_div
{
    position: relative; 
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    *display: inline;   

    cursor: hand; 
    cursor: pointer;       
}

.resizable
{
    width: 50%;   
    border: 1px solid #bb0000;   
}
.resizable img
{
    width: 100%;   
}

.ui-resizable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    width: 9px;
    height: 9px;

    z-index: 2;
}
.ui-resizable-se
{
    right: -5px;
    bottom: -5px;
}

.ui-rotatable-handle 
{
    background: #f5dc58;
    border: 1px solid #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer;

    height:        10px;
    left:          50%;
    margin:        0 0 0 -5px;
    position:      absolute;
    top:           -5px;
    width:         10px;
}
.ui-rotatable-handle.ui-draggable-dragging
{
    visibility:  hidden;
}

Answer 1

You cannot achieve this if you want to preserve the aspect ratio . So basically when you remove that option from the resizable , you can use the corners to drag on any direction as per your requirement and scale it across height and width.

$('.resizable').resizable({
    //aspectRatio: true, //comment or remove this
    handles: 'ne, se, sw, nw'
});

DEMO

Answer 2

try this code , in this code i doing resizing from its edge:

<div id='resizeDiv'><div id='handle' class="ui-resizable-handle ui-resizable-s"></div>
</div>

#resizeDiv {
    margin: 20px;
    width: 100px;
    height: 100px;
    border: 1px solid #CCC;
    background-color: #FAFAFA;

}

#handle {
    width: 100px;
    height: 10px;
    background-color: gray;
}

$(function() {
        $( "#resizeDiv" ).resizable({handles: {'s': '#handle'}});
    });

JSfiddle click here...

Answer 3

Do it simple, no need to complicate yourself with JavaScript. Usually the more simple the more it guarantees it will work on all browsers. Sometimes "Less is More" Just use this in your CSS and wallah it works.

.divName {
    resize: both;
    overflow: auto;
} 

You can also use resize:horizontal; or resize:vertical; or resize:none;

As in example if you only want vertical resize but not horizontal:

.divName {
    resize: vertical;
    overflow: auto;
} 

Answer 4

Just use css property resize and overflow:

div
{
    resize: both;
    overflow: auto;
}