HTML+CSS+JavaScript

Как отследить изменение размеров DIVа?
Вроде как вот тут написано, что у элемента DIV есть событие onresize.

Однако код:

$(function(){   $('#specbox').resize( function(){     alert( 1 )   }) })

ничего не выводит =(
При этом resize в списке обработчиков элемента присутствует.

Размеры DIVа изменяются при изменении размеров его потомков методами .slideUp() и .slideDown() и просто при изменении контента.

Метод .resize() устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие. В IE и браузерах на основе WebKit (Safari и Chrome) это событие вызывается постоянно по мере изменения размеров окна, в то время как в Firefox, например, событие resize может быть вызвано только при завершении изменения размеров окна.

Событие onresize возникает при изменении размеров body, frameset, window, document. Событие onresize также может возникнуть в IE при изменении размеров элемента в редактируемой области.

Если необходимо отслеживать изменение размеров элемента при анимации, то проверяйте размер на каждом шаге анимации.

Спасибо.

> то проверяйте размер на каждом шаге анимации.
Нереально.
Вернее как-то это не красиво будет. Очень много действий, изменяющих размер интересующего меня DIVa.
Может запустить таймер, скажем через пол секунды, проверяющий размеры до и после? Это будет тяжело для клиента или как?

Реально.
"Красивость" применительно к программе, это если вы программист гурман.
А анимация, это и есть операции выполняемые по таймеру, зачем еще создавать такой? К тому же потребуется синхронизация процессов, вряд ли вы ее обеспечите.
А если говорить только о размерах до (анимации?) и после (анимации?), то первое вы знаете, а второе нужно узнавать в callback-функции по завершении анимации, и не надо ничего отслеживать тогда.

Ну во-первых это не всегда анимация. Если загрузка донных по AJAX, то они просто втыкаются в ДИВ.
А во-вторых, что касается "анимация, это и есть операции выполняемые по таймеру, зачем еще создавать такой?" - а как получить доступ именно к таймеру анимации?

Вообще, зачем все это нужно? Есть див, разделенный на несколько колонок (тоже дивы). У каждой может быть большая высота, но прокручивать все вместе не удобно. Поэтому общий скролл не удобен. Поэтому для каждого вложенного дива используется overflow-y:scroll. Но если установить этот стиль сразу, то скроллбары тоже сразу появляются, не смотря на то, что изначально они не нужны. Поэтому хочу сделать следующее: при увеличенни одной из колонок контента сперва, как это бывает по умолчанию, опускается нижняя граница до тех пор, пока не упрется в границу окна. Затем начинает подниматься верхняя, Если и она упирается, то для вложенных дивов, превышающих высоту экрана устанавливается max-height и overflow-y.

Что можете посоветовать?

В описании метода .animate() описаны опции, через которые и можно получить доступ. И не к таймеру анимации (он вам не нужен), а получить состояние анимации в моменты времени.

Что значит "это не всегда анимация" я не понимаю, так как вы говорили именно о ней, а AJAX, или иное, это не важно.

А overflow auto?

>А overflow auto?
А overflow не auto =)
Спасибо, помогло. В принципе - терпимо теперь выглядит. Не совсем то, что хотел, но овчинка выделки не стоит.

>Что значит [i]"это не всегда анимация" я не понимаю, так как вы говорили именно о ней, а AJAX, или иное, это не важно.[/i]
Я в начале писал:
Размеры DIVа изменяются при изменении размеров его потомков методами .slideUp() и .slideDown()
и просто при изменении контента.
жирным имелось ввиду, что после загрузки контента AJAX'ом используется метод .html()

Надо полагать, что вы же контролируете запрос и ответ, а значит и выдачу результата. Следовательно, если это порции данных разделенных во времени, то вообще никакой проблемы проконтролировать элемент и его родителя. Если же сразу происходит заполнение всех элементов, то какая проблема запускать очередь анимаций и таким образом иметь возможность контроля каждого элемента по окончании его анимации и соответственно что-то подправить в родителе.

Да никаких проблем. Просто в коде (который еще и не завершен) уже сейчас около 70 различных действий, изменяющих контент. Соответственно в таком количесве мест вставлять отсыл к функции проверки размера - овчинка выделки не стоит. Ограничился расчетом max-height при onload. Плюс Вы еще подсказали про overflow:auto, и выглядит все нормально. От изначальной задумки осталась нереализованной только прокрутка к верху блока. И ради нее не буду заморачиваться.
Спасибо за подсказки.

"Any element can be given an onresize attribute, however only the window object has a resize event.
Resizing other elements (say by modifying the width or height of an img element using script) will not raise a resize event."
(с)https://developer.mozilla.org/en-US/docs/DOM/element.onresize

в вольном переводе: седло вы можете одеть и на корову, но работать оно будет только на лошади :)
-----------------

в браузере MSIE (и только в нём) событие onresize, прописанное на блочном теге с дефолтной шириной (имеющем предустановленную высоту) срабатывает, но только в случае изменения размеров ОКНА по ширине

<html> <body> <hr onresize="alert ('HR')"> <div style="height: 30px" onresize="alert ('DIV-1')"></div> <div onresize="alert ('DIV-2')">text</div> <!-- этот алерт никогда не сработает; высота не предустановлена--> </body> </html>

Спасибо. Так я по поведению и понял.