Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 35
Что-то не совсем понятна задача:
слишком много вариантов решения, например, контент может вместиться в окна с размерами: 200 на 200, 300 на 100, 100 на 300 и пр. пр. пр.
слишком много вариантов решения, например, контент может вместиться в окна с размерами: 200 на 200, 300 на 100, 100 на 300 и пр. пр. пр.
Да, размер контента заранее неизвестен.
И после рендеринга размер окна надо подогнать под размер этого контента.
И после рендеринга размер окна надо подогнать под размер этого контента.
так в том то и проблема, что блок растягивается по окну, а не наоборот (хотя бы по ширине)
Пояснения к этому вопросу давал в этом комментарии: grinka.habrahabr.ru/blog/43638/#comment_1084563
Да, размер контента заранее неизвестен.
И после рендеринга размер окна надо подогнать под размер этого контента.
И после рендеринга размер окна надо подогнать под размер этого контента.
«Требуется, чтобы после открытия окно приняло бы размеры в соответствии с контентом, оставив небольшой, заранее определённый отступ.»
Я так понял ещё надо центрировать его… так?
+
Что значит ширина контента? Там будут какие-то блочный элементы имеющие поределённую ширину?
Просто если это текст, то у него нет как таковой ширины.
Я так понял ещё надо центрировать его… так?
+
Что значит ширина контента? Там будут какие-то блочный элементы имеющие поределённую ширину?
Просто если это текст, то у него нет как таковой ширины.
Попробую пояснить:
При открытии у окна заданы какие-то конкретные размеры. По умолчанию дивы растянутся максимально на всю ширину этого окна. Но контент может оказаться и шире, так как внутри могут оказаться какие угодно элементы — и дивы и картинки и таблицы.
Значит, как минимум, нужно выровнять высоту окна. В случае, если контент не влезает по ширине, то приходится подгонять и ширину окна.
При открытии у окна заданы какие-то конкретные размеры. По умолчанию дивы растянутся максимально на всю ширину этого окна. Но контент может оказаться и шире, так как внутри могут оказаться какие угодно элементы — и дивы и картинки и таблицы.
Значит, как минимум, нужно выровнять высоту окна. В случае, если контент не влезает по ширине, то приходится подгонять и ширину окна.
ну размеры окошка, ни как без js не поменять.
Собственно надо определить размеры дива с контентом и сделать нужный window.resize().
А вот насчёт
$("#popupContainer").css(«margin-left», "-" + ($("#popupContainer").outerWidth() / 2) + «px»);
$("#popupContainer").css(«margin-top», "-" + ($("#popupContainer").outerHeight() / 2) + «px»);
Это я так понял вы реализуете отступы нужные. Так?
Я так понял здесь проблема как раз с задержкой этого действия.
Я бы мог предложить вам различные варианты этой реализации на css.
Просто не совсем понятно, что у вас в окошке а что нет:
так, например, rootDiv в старом окне, или вместе с popupContainer в новом?
Собственно надо определить размеры дива с контентом и сделать нужный window.resize().
А вот насчёт
$("#popupContainer").css(«margin-left», "-" + ($("#popupContainer").outerWidth() / 2) + «px»);
$("#popupContainer").css(«margin-top», "-" + ($("#popupContainer").outerHeight() / 2) + «px»);
Это я так понял вы реализуете отступы нужные. Так?
Я так понял здесь проблема как раз с задержкой этого действия.
Я бы мог предложить вам различные варианты этой реализации на css.
Просто не совсем понятно, что у вас в окошке а что нет:
так, например, rootDiv в старом окне, или вместе с popupContainer в новом?
Весь этот контент находится в новом окне.
Связка rootDiv + popupContainer используется, чтобы отцентровать. То есть родительский контейнер помещает верхнюю грань по центру экрана. Внутренний контейнер — левый край по середине экрана. В результате имеем, что левый верхний угол внутреннего (popupContainer) контейнера находится в центре экрана.
Теперь, если нам известна ширина и высота этого внутреннего контейнера, задаём ему отрицательные маргины — в аккурат в половину этих величин. Так, например, если ширина 400 пикселов, а высота 300, то
и вот уголок сместился влево-вверх и у нас внутренний контейнер ровно посередине окна.
(естественно, должны быть заданы правильные position.
К сожалению, совершенно не помню, где именно читал оригинальную статью про такой способ выравнивания :(
А отступы нужные я реализую задавая resizeTo(width + 120, height + 160) парой строчек выше. В результате при центрировании будет запас слева/справа по 60 пикселов, сверху/снизу — по 80.
Так вот проблема в том, что при ResizeTo изменяется конкретно размер окна, размер же контентной области окна будет разным в зависимости от наличия разных тулбаров, высоты статусбаров и т. п. Вопрос: как же вычислить эти значения, которые надо подставить для resizeTo, если высоту статусбара/тулбара я определить просто не могу.
Или могу?
Связка 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, если высоту статусбара/тулбара я определить просто не могу.
Или могу?
Возможно вам поможет jQuery. Вы генерируете окно, в нем размещается контент (и возможно он не влазит, но зато теперь библиотека может рассчитать его ширину), затем jQuery имея ширину контента плюсует к нему нужные вам отступы и присваивает результат суммы ширине окна. Окно принимает, таким образом свой размер после генерирования наполняющего его контента.
Я не уверен, что это сработает (потому как особо не приходилось делать поп-апы), но, думаю, вполне может.
Я не уверен, что это сработает (потому как особо не приходилось делать поп-апы), но, думаю, вполне может.
Именно так я и поступаю, если Вы ещё раз взглянете на приведённый код, вы увидите, что как раз на document.ready повешен обработчик, который производит ресайз в соответствии с описанным Вами алгоритмом. И с шириной всё более-менее нормально, а вот высота получается зависимой от высот тул- статус- и прочих баров браузера.
Послушайте, на большом мониторе весь ваш текст уместится и в одну строку.
Удобная для чтения длина строки — 40-60em. Может от этого и стоит отталкиваться?
Удобная для чтения длина строки — 40-60em. Может от этого и стоит отталкиваться?
Столь короткий текст размещён исключительно для того, чтобы не загромождать страницу. Реально там не всегда и 600 пикселов в высоту хватает — могут быть довольно большие и громоздкие конструкции.
Я одного не понял, это настоящее новое окно или div {position: absolute}
Если новое окно, то хак может быть таким: подгрузить контент в невидимый div, измерить его, и открыть окно соответствующего размера.
Но создавать новые окна это плохо. В Опере например можно заблокировать resize через JavaScript. А в Фаерфоксе окна могут долго открываться, пользователь снова жмёт на ссылку, потом ещё раз, и в результате получает сразу десяток окон.
Если новое окно, то хак может быть таким: подгрузить контент в невидимый div, измерить его, и открыть окно соответствующего размера.
Но создавать новые окна это плохо. В Опере например можно заблокировать resize через JavaScript. А в Фаерфоксе окна могут долго открываться, пользователь снова жмёт на ссылку, потом ещё раз, и в результате получает сразу десяток окон.
Рекурсия какая-то…
Простите… где рекурсия?
Ну, если не вдаваться в подробности:
Рисуем контент в окне. Подгоняем окно под ширину контента. Может ли после второй операции изениться ширина контента? Если да, то повторять п.2. до полного удовлетворения.
Рисуем контент в окне. Подгоняем окно под ширину контента. Может ли после второй операции изениться ширина контента? Если да, то повторять п.2. до полного удовлетворения.
Я бы поробовал замутить так.
Рисуем контент в заданном отцентрованном слое с min-width, min-height.
В предположительно минимальном окне.
Меряем контент.
Если он не шире(выше чем надо), изменяем положение и размеры окна (можно в несколько шагов, что-то типа анимации — если не получается подогнать размеры быстро).
Если шире(выше) то ставим соответствующие макс размеры и центрируем окошко.
Я так понял, а может не понял.
Рисуем контент в заданном отцентрованном слое с min-width, min-height.
В предположительно минимальном окне.
Меряем контент.
Если он не шире(выше чем надо), изменяем положение и размеры окна (можно в несколько шагов, что-то типа анимации — если не получается подогнать размеры быстро).
Если шире(выше) то ставим соответствующие макс размеры и центрируем окошко.
Я так понял, а может не понял.
А вобще обязательно попап?
К сожалению да.
Для переделки с попапа на «псевдопопап» (div+ajax) потребуется слишком много времени.
Для переделки с попапа на «псевдопопап» (div+ajax) потребуется слишком много времени.
А мне вот как раз потребовалось примерно (определить размеры div и отцентрировать его в другом, меньшем div c overflow:hidden)такое но на div. Т. е. какбы панорама в слое без возможности узнать заранее размеры контента.
Тогда Вам, возможно, как раз подойдёт описанный мною способ: grinka.habrahabr.ru/blog/43638/#comment_1084883
Сначала задаёте координаты левого верхнего угла в 50%, затем вычисляете размеры внутреннего дива и затем задаёте отрицательные маргины ровно в половину этих размеров. И центры должны совместиться.
Сначала задаёте координаты левого верхнего угла в 50%, затем вычисляете размеры внутреннего дива и затем задаёте отрицательные маргины ровно в половину этих размеров. И центры должны совместиться.
Всем большое спасибо за то, что помогли точно сформулировать проблему из моего достаточно сумбурного начального материала.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Проблема: выравнивание размеров окна по контенту