Глобальная проблема с событием 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 только для цвет поменять что-ли, тебе дали ссылку иди развивайся я переубеждать тебя не собираюсь дауна там всё написано)))
|
Север3,
Цитата:
А вообще, конечно, CSS |
В общем, всех завёл за корягу, всем приношу извинения, даже даунов раздавателю. resize работает как и положено выдаёт все изменения которые произошли при его применении. Моя ошибка. Приятно, что столько людей отозвалось. Хотя не одного правильного ответа не было. Правильный ответ: херню городишь, проверь код. Ошибка следующая, мало ли кому пригодится, при реализации поведения блоков при плавном изменении размера экрана, нельзя использовать дискретные единицы, например "рх", только %. Вернее можно, но тогда при определении поведения объектов уже внутри этих блоков будут люфты. Т. е. объекты перестроятся на экране, но изменение свойств, привязанных к этой перестройке, произойдёт если размер экрана превысит некую величину.
На этом тему закрываю. |
Часовой пояс GMT +3, время: 04:46. |