Resize Element - with handles

by Ben Clayton

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<div id='elementResizable'>
    <h1>Full Name</h1>
    Title
    <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>
</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;
}

JavaScript

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