Глобальная проблема с событием resize
 

Привет академикам ECMAScript!!
Резиновая страница сайта. При изменение размера окна, соответственно меняются элементы страницы, в том числе и с помощью Javascript. Используемые события resize и load. С load всё просто. А вот resize есть глобальная проблема. Можно привязываться только к размерам окна!! Привязываться, к примеру, к координатам элементов или к их размерам получившимся в результате изменения окна, можно, но получается слегка коряво. А иногда и не слегка. Поскольку сначала срабатывает скрипт назначенный на событие, а потом только меняются элементы.
Заметил когда хотел изменить стили кнопок.
Когда кнопки размещаются одна над другой добавлял пространство между ними.
resize срабатывает несколько раз при изменении окна и проблему сразу не заметил. А вот когда заметил, то сильно приуныл, поскольку похоже, что она в принципе нерешаемая. И концепция проектирования резиновых страниц по событию может строится только на размерах окна. Что порой бывает очень неудобно и громоздко.
Определить окончание перестройки DOM после resize и потом только запустить функцию похоже невозможно.
Если кто, что подскажет, буду крайне признателен. :( :( :( :(

Север3,
Короче прикол в том, чтобы сохранить старую координату (ну или че там тебе нужно) и внутри обработки resize окна достать новое значение и проверить со старым

К сожалению этот прикол не сработает. Внутри resize новое только размеры окна. Всё остальное старое. А вот как его тормознуть, до того как появятся новые значения неизвестно.

Север3,
Блин я тебе говорю при загрузке окна положить в глобальные переменные твои размеры и в листенере ресайза окна достать из стилей новые размеры и сравнить со старыми, если изменились то перезаписать старые на новые и применить

Coriolan161,
Пока меня немного отвлекли, ты высказал мои мысли...
с небольшими уточнениями - проверка чуть попозже

var oldWidth = 0,
            oldHeight = 0,
            newWidth = 0,
            newHeight = 0;
        $(window).on('resize', function () {
            newWidth = $(window).width();
            newHeight = $(window).height();
  
            setTimeout(function () {
                if (newWidth == oldWidth && newHeight == oldHeight) {
                    oldHeight = 0;
                    oldWidth = 0;
                    alert("Можно перекомпоновывать");
                }
            }, 1000);
            oldWidth = newWidth;
            oldHeight = newHeight;
        });

Почему-то тестовый пример не хочет здесь работать... Наверное, resize не добирается до демо-окна. Как отдельная страничка - работает.

C setTimeout мысль понятна. Но setTimeout неприемлем. Время не установить. Слишком большой интервал, всё прыгает. Маленький нестабильно и тоже всё прыгает. Нужно писать функцию отключения setTimeout на время изменения окна. Но тогда не увидеть динамически изменяемый вид страницы. В общем очень грубый костыль.

в листенере ресайза окна достать из стилей новые размеры - тут непонятное слово "листенер".

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

Для проверки можно поставить арлет например на размер дива, и если после перезагрузки страницы и ресайз они разные тогда всё получилось. Но только не рукой двигать, а сворачивать или разворачивать экран. Иначе ресайз сработает несколько раз и нчего не будет понятно. Поскольку очевидно, что повторное срабатывание обновиляет значения.

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

Север3,
Листенер - это и есть $(window).on('resize', function () {

$(window).on('resize', function () { - здесь старые значения. Новые применятся только на следующем ресайзе.
С помощью CSS динамическую таблицу из 6 - ти столбцовой в 3-х столбцовую не переделать.

Север3, а ты думал CSS только для цвет поменять что-ли, тебе дали ссылку иди развивайся я переубеждать тебя не собираюсь дауна там всё написано)))