Resizable using jquery UI

by Andy Bulka

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<div class="demo">
  <div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
  </div>
</div>
<h2>Example with events</h2>
See jqueryui doco <a href="http://jqueryui.com/demos/resizable/">here</a>
<div id="resizeDiv2"></div>
<textarea rows="6" cols="20">
diagnostic info will appear here and also in the div below.  
</textarea>
<div id="notresizable">
</div>

<p>All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object.</p>
<b>The ui object has the following fields:</b>
<ul>
<li><b>ui.helper</b> - a jQuery object containing the helper element</li>
<li><b>ui.originalPosition</b> - {top, left} before resizing started</li>
<li><b>ui.originalSize</b> - {width, height} before resizing started</li>
<li><b>ui.position</b> - {top, left} current position</li>
<li><b>ui.size</b> - {width, height} current size</li>
</ul>

<h2 style="display: inline">Another Example, both draggable and resizable</h2>
<a href="http://viralpatel.net/blogs/2010/01/jquery-resizable-draggable-resize-drag-tutorial-example.html" style="background: beige">See here</a>

<div id="resizeDiv"></div>

CSS

/* h2 {font-size: 1.5em; } */
#resizable { width: 150px; min-height: 50px; height: 150px; padding: 0.5em; background: red; display:inline-block;}
#resizable h3 { text-align: center; margin: 0; }
.demo { background: yellow }

#resizeDiv { width: 150px; height: 100px; padding: 0.5em; background: green; }
#resizeDiv2 { width: 150px; height: 80px; padding: 0.5em; background: aqua; }
textarea { display: inline-block; }
#notresizable { width: auto; min-height: 150px; padding: 0.5em; background: beige; overflow:auto;display:block;}

JavaScript

$(function() {
    $("#resizable").resizable();
    console.log("hi");
});

$('#resizeDiv')
    .draggable()
    .resizable();

$('#resizeDiv2')
    .resizable({
        /*start: function(e, ui) {
            alert('resizing started');
        },*/
        resize: function(e, ui) {
           //console.log(e);
           //console.log(ui);
           //$("#resizable").append('. ');
           //$('<p>'+ui.size.width+'</p>').appendTo('body');
           //$("#notresizable").append('. ');
           $('#notresizable').append(ui.size.width + ' ');
           $('textarea').append(ui.size.width + ' ');
           $("textarea")[0].scrollTop = $("textarea")[0].scrollHeight;
        },
        /*stop: function(e, ui) {
            alert('resizing stopped');
        }*/
    });

/*
$("textarea").change(function() {
  console.log('AA');
  scrollToBottom();
});
function scrollToBottom() {
   $('textarea').scrollTop($('textarea')[0].scrollHeight);
   console.log($('textarea')[0].scrollHeight);
}
*/