Изменить размер текста в текстовом поле вместе с div, используя jquery

Question

У меня есть пустой div с текстовым полем, и если я что-то напишу в текстовом поле и если я увеличу div, перетаскивая его в угол, текст внутри текстового поля должен увеличиться вместе с текстовым полем.сейчас я могу увеличить текстовое поле до размера div, но теперь мне нужно увеличить текст внутри него.

Любая помощь будет сильно оценена!

Это то, что у меня есть: http://jsfiddle.net/gmrcn/2/

Вот мой код:

  $(function () {

     $('.demo')

    .draggable()

    .resizable();

    });

Это код проекта:

<div class="demo">

        <textarea name="TextBox1" rows="2" cols="20" id="TextBox1"></textarea>

    </div>

CSS:

    #TextBox1 {
    width: 100%;
    height: 100%;
}

.demo {
    width: 150px;
    height: 150px;
    padding: 5px;
    background-color: #ff8811;
    position: absolute;
    top: 150px;
    left: 300px;
}

#content
{
    padding-bottom: 3em;
}

Answer 1

Вы можете подключиться к событию resize метода resizable, например:

$(function () {

     $('.demo')
    .draggable()
    .resizable({
        resize: function(event, ui) {
           $('#TextBox1').css('font-size', $(this).height() / 3);
        }
    });
 });