Resize Element with box handles in corners

Question

in Jcrop , after selecting cropping area , a div appears with box handles in corners.

Is there any jQuery plugin that can build this type of box handles ?

Marji

THe handles are CSS! With ID's that are hooked into the plugin. Making one your self will be easy. Just use jcrops CSS file as example – Jape

Answer 1

You can use jQuery UI's resizable as noted above. I even setup a fiddle for ya!

http://jsfiddle.net/digitalaxis/j2JU6/

jQUERY

$('#element').resizable({
    handles: {
    'ne': '#negrip',
    'se': '#segrip',
    'sw': '#swgrip',
    'nw': '#nwgrip'
    }
});

HTML

<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>

CSS

#elementResizable {
    border: 1px solid #000000;
    width: 300px;
    height: 40px;
    overflow: hidden;
}
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
}
#segrip {
    right: -5px;
    bottom: -5px;
}

Asseverate

Nice work @Randy. Here's a more complete example, finishing what you started: jsfiddle.net/j2JU6/440 – Lasonde

Answer 2

You can use the jQuery UI Resizable plugin:

http://jqueryui.com/demos/resizable/

Use the "handles" parameter to make your element resizable through it's entire border.

Filariasis

Again.. this answer is good- But you need to add the "Box Handles" your self using CSS. Its not difficult. – Jape