Изменение размера окна jQuery

Question

У меня есть фрагмент кода javascript, который должен обработать при изменении размера окна браузера .

resize.style.marginRight=(resize.offsetWidth-$(this)[0].offsetWidth)+'px'

Пробовал этот материал (не работает):

window.onresize = function(event) {
resize.style.marginRight=(resize.offsetWidth-$(this)[0].offsetWidth)+'px'
}

Полный код доступно - http://jsbin.com/adelu3/2/ (см. Страницу источника)

HTML (генерируется скриптом):

<div class="resizable-textarea">
    <span>
        <textarea class="resizable processed" cols="" rows=""></textarea>
        <div class="resize"></div>
    </span>
</div>

Спасибо.

Answer 1

$(this)[0].offsetWidth

offsetWidth является свойством элементов. В коде обратного вызова window.onresize, this - это Window, который не имеет offsetWidth.

Что должно быть this? (Событие onresize отсутствует в связанном коде.) Если вы хотите прочитать ширину окна, используйте $(window).width().

Если вы хотите прочитать ширину какого-либо другого элемента (предка?), Который у вас был как this во вложенной области видимости, вы должны либо найти этот элемент, оторвавшись от элемента resize, либо сохранить ссылку к другому элементу в замыкании, например ::

var that= this;
$(window).resize(function() {
    resize.style.marginRight= resize.offsetWidth-that.offsetWidth+'px'
});

(примечание. $(this)[0] точно ничего не делает.)

Answer 2

Сделано сам.

Это смешанное решение, оно разделяет код @ bobince и мой собственный.

var tarea= this;
function resize_width(){ resize.style.width= tarea.offsetWidth+'px'}
resize_width();
$(window).resize(function() {resize_width()});