Как стать автором
Обновить

Комментарии 35

Что-то не совсем понятна задача:
слишком много вариантов решения, например, контент может вместиться в окна с размерами: 200 на 200, 300 на 100, 100 на 300 и пр. пр. пр.
Да, размер контента заранее неизвестен.
И после рендеринга размер окна надо подогнать под размер этого контента.
так в том то и проблема, что блок растягивается по окну, а не наоборот (хотя бы по ширине)
Да, размер контента заранее неизвестен.
И после рендеринга размер окна надо подогнать под размер этого контента.
Кстати, проверил с подсчётом сдвига «на лету». Работает под Opera 9, IE 7, FF 3.0, но окно явственно «прыгает» перед глазами :(
«Требуется, чтобы после открытия окно приняло бы размеры в соответствии с контентом, оставив небольшой, заранее определённый отступ.»

Я так понял ещё надо центрировать его… так?
+
Что значит ширина контента? Там будут какие-то блочный элементы имеющие поределённую ширину?
Просто если это текст, то у него нет как таковой ширины.
и ещё «окно» это я так понимаю вы про div. Нет?
помойму автор явно написал окно.
окошко браузера должно охватить блок независимо от его размера, с определённым отступом
но пример то у автора дивы:
div id=«rootDiv»
div id=«popupContainer»
Высота дива зависит от наполнения.
Ширина в принципе тоже может «не уместиться».
Так что размер окна должен быть подогнан.
Попробую пояснить:

При открытии у окна заданы какие-то конкретные размеры. По умолчанию дивы растянутся максимально на всю ширину этого окна. Но контент может оказаться и шире, так как внутри могут оказаться какие угодно элементы — и дивы и картинки и таблицы.

Значит, как минимум, нужно выровнять высоту окна. В случае, если контент не влезает по ширине, то приходится подгонять и ширину окна.
ну размеры окошка, ни как без js не поменять.

Собственно надо определить размеры дива с контентом и сделать нужный window.resize().
А вот насчёт
$("#popupContainer").css(«margin-left», "-" + ($("#popupContainer").outerWidth() / 2) + «px»);
$("#popupContainer").css(«margin-top», "-" + ($("#popupContainer").outerHeight() / 2) + «px»);
Это я так понял вы реализуете отступы нужные. Так?
Я так понял здесь проблема как раз с задержкой этого действия.
Я бы мог предложить вам различные варианты этой реализации на css.
Просто не совсем понятно, что у вас в окошке а что нет:
так, например, rootDiv в старом окне, или вместе с popupContainer в новом?
Весь этот контент находится в новом окне.
Связка rootDiv + popupContainer используется, чтобы отцентровать. То есть родительский контейнер помещает верхнюю грань по центру экрана. Внутренний контейнер — левый край по середине экрана. В результате имеем, что левый верхний угол внутреннего (popupContainer) контейнера находится в центре экрана.

#rootDiv
{
top: 50%;
}
#popupContainer
{
left: 50%;
}


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

#popupContainer
{
margin-left: -200px;
margin-top: -150px;
}

и вот уголок сместился влево-вверх и у нас внутренний контейнер ровно посередине окна.
(естественно, должны быть заданы правильные position.

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

А отступы нужные я реализую задавая resizeTo(width + 120, height + 160) парой строчек выше. В результате при центрировании будет запас слева/справа по 60 пикселов, сверху/снизу — по 80.

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

Или могу?
вы можете сравнить
window.innerHeight и window.outerHeight

P.S.
window.innerHeight- возвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах.

window.outerHeight- возвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселах.
ну и с шириной так же.
outerHeight, outerWidth работают во всех браузерах?
ie не поддерживает вроде, но я думаю для него есть аналоги)
я думаю стоит протестить)
Проверил. IE6 точно не поддерживает, зараза :(
Аналоги буду искать.
Возможно вам поможет jQuery. Вы генерируете окно, в нем размещается контент (и возможно он не влазит, но зато теперь библиотека может рассчитать его ширину), затем jQuery имея ширину контента плюсует к нему нужные вам отступы и присваивает результат суммы ширине окна. Окно принимает, таким образом свой размер после генерирования наполняющего его контента.
Я не уверен, что это сработает (потому как особо не приходилось делать поп-апы), но, думаю, вполне может.
Именно так я и поступаю, если Вы ещё раз взглянете на приведённый код, вы увидите, что как раз на document.ready повешен обработчик, который производит ресайз в соответствии с описанным Вами алгоритмом. И с шириной всё более-менее нормально, а вот высота получается зависимой от высот тул- статус- и прочих баров браузера.
Послушайте, на большом мониторе весь ваш текст уместится и в одну строку.
Удобная для чтения длина строки — 40-60em. Может от этого и стоит отталкиваться?
Столь короткий текст размещён исключительно для того, чтобы не загромождать страницу. Реально там не всегда и 600 пикселов в высоту хватает — могут быть довольно большие и громоздкие конструкции.
Я одного не понял, это настоящее новое окно или div {position: absolute}

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

Но создавать новые окна это плохо. В Опере например можно заблокировать resize через JavaScript. А в Фаерфоксе окна могут долго открываться, пользователь снова жмёт на ссылку, потом ещё раз, и в результате получает сразу десяток окон.
К сожалению, тут ситуация такая, что проще замазать, чем отскоблить — требуется именно открывать новые окна.
Рекурсия какая-то…
Простите… где рекурсия?
Ну, если не вдаваться в подробности:
Рисуем контент в окне. Подгоняем окно под ширину контента. Может ли после второй операции изениться ширина контента? Если да, то повторять п.2. до полного удовлетворения.
Я бы поробовал замутить так.
Рисуем контент в заданном отцентрованном слое с min-width, min-height.
В предположительно минимальном окне.
Меряем контент.
Если он не шире(выше чем надо), изменяем положение и размеры окна (можно в несколько шагов, что-то типа анимации — если не получается подогнать размеры быстро).
Если шире(выше) то ставим соответствующие макс размеры и центрируем окошко.

Я так понял, а может не понял.
В принципе такая схема работает, но получается, что размер окна «прыгает». Выглядит крайне раздражающе.
А вобще обязательно попап?
К сожалению да.
Для переделки с попапа на «псевдопопап» (div+ajax) потребуется слишком много времени.
А мне вот как раз потребовалось примерно (определить размеры div и отцентрировать его в другом, меньшем div c overflow:hidden)такое но на div. Т. е. какбы панорама в слое без возможности узнать заранее размеры контента.
Тогда Вам, возможно, как раз подойдёт описанный мною способ: grinka.habrahabr.ru/blog/43638/#comment_1084883

Сначала задаёте координаты левого верхнего угла в 50%, затем вычисляете размеры внутреннего дива и затем задаёте отрицательные маргины ровно в половину этих размеров. И центры должны совместиться.
Всем большое спасибо за то, что помогли точно сформулировать проблему из моего достаточно сумбурного начального материала.
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации