Изменение размера jQuery не работает в FireFox, Chrome и Safari

Question

$("#dvMyDIV").bind("resize", function(){
    alert("Resized");
});

или

$("#dvMyDIV").resize(function(){
    alert("Resized");
});

Вопросы

1. Почему это не работает в FireFox, Chrome и Safari?
2. Можно ли считать это ошибкой jQuery, поскольку изменение размера не обрабатывается для других браузеров?
3. Может ли единственный обходной путь - вызвать функцию SetTimeout, проверяющую clientHeight и clientWidth?
4. Есть ли обходные пути с использованием jQuery?

Answer 1

Я считаю, что событие изменения размера JavaScript применяется только к фреймам или окнам, а не к DIV.

например. см эту страницу :

Обработчик onResize even используется для выполнения указанного кода всякий раз, когда пользователь или скрипт изменяет размер окна или фрейма. Это позволяет запрашивать размер и положение элементов окна, динамически сбрасывать свойства SRC и т. Д.

Так что, если вы хотите определить, когда размер окна изменяется, в jQuery вам, вероятно, следует использовать $(window).resize(function() { });

Редактировать: Если вы хотите посмотреть размер DIV, это зависит от ваших намерений. Если вы изменяете размер с помощью JavaScript, вы можете реализовать метод для выполнения изменения размера и иметь этот дескриптор, вызывающий любой другой код изменения размера.

В противном случае, если вы просто наблюдаете за изменением размера DIV, когда кто-то изменяет размер окна, разве это не сработает, чтобы присоединить слушателя изменения размера к окну, а затем проверить, был ли изменен размер DIV (то есть, сохранить старый значения ширины / высоты и проверьте их на изменение размера)?

Наконец, вы можете рассмотреть возможность использования watch в свойствах width / height, хотя я не знаю, является ли это полностью совместимым с браузером (думаю, это может быть только для Mozilla). Я нашел этот плагин jQuery , который выглядит так, как будто он может делать то же самое (с небольшой модификацией).

Answer 2

Для этого есть плагин benalman:)

http://benalman.com/projects/jquery-resize-plugin/

Answer 3

Это не вопрос, ПОЧЕМУ? Требуется, как, например, мы ХОТИМ отслеживать DIV при изменении его размера.

Для наглядного примера, JQuery UI, изменяемого размера. Да, пользователь изменил размер div путем перетаскивания мышью, что теперь? Возможно содержание внутри изменено, и мы хотим знать об этом. И должен ли мы иметь весь код в гигантском плавильном котле в исходном коде изменения размера? Я так не думаю.

Еще один быстрый браузер, который ничего не делает, вздох.

Answer 4

Вы пытаетесь установить myDiv определенного размера?

Попробуйте код JavaScript ниже. Я использовал его для изменения размера div, в котором содержится объект flash, основываясь на высоте, возвращаемой из файла flash, и мне показалось, что она работает нормально.

function setMovieHeight(value) {
    var height = Number(value) + 50;
document.getElementById("video").height = height;
}

jQuery-эквивалент должен быть:

function setHeight(value) {
   var height =  number(value) + 50;
   $('#MyDiv').attr('height') = height;
}

Изменение размера применимо только к объекту Windows.

Answer 5

С MSIE все работает просто отлично. С Firefox, я думаю, вам придется прибегнуть к некоторым косвенным методам, таким как сохранение первоначальной ширины / высоты элемента в пользовательских свойствах и использование $(elem).bind('DOMAttrModified', func). Затем в обратном вызове func () проверьте, отличаются ли новые ширина / высота от тех, которые вы сохранили ранее, выполните соответствующее действие по изменению размера и сохраните их снова для следующего обратного вызова. Обратите внимание, что этот подход работает только для Firefox. Я пока не смог найти достойного обходного пути для Chrome, Safari и Opera. Может быть, использование window.setInterval () подойдет, но ... звучит слишком неряшливо ... если мысль об этом делает меня немного больным: (

Answer 6

Вот гораздо более изощренный и живой пример, который выполняет большую математику изменения размера на основе события изменения размера окна. Прекрасно работает в ff 3.6, safari 4.0.4 и chrome. Это немного коренасто в ff 3.5. Таким образом, он должен работать в Mozilla и WebKit по всем направлениям. Я избегаю другого БРАУЗЕРА, потому что он мне действительно не нравится, а код намного чище без необходимости его учитывать. Я понимаю, что мне придется преодолеть это, я проглатываю это, когда я должен с и IE доплаты.

ВСЕГДА ссылка:

http://fridaydev.com/bookmap/proport3.html

Answer 7

Я мог бы предложить что-то вроде этого:

1) при загрузке страницы, получите ширину вашего div и поместите его в глобальную переменную

2) при выполнении какой-либо операции прямо или неявно изменяет размер этого div (который, я предполагаю, является событием, управляемым javascript) проверяет новую ширину по сравнению со старой и обновляет глобальное значение новой шириной.

Answer 8

Почему вы ожидаете, что #dvMyDIV будет изменен? Может быть изменение размера этого элемента является результатом чего-то другого, может быть изменение размера окна? Если это так, попробуйте

$(window).resize(function(){alert("Resized");});