Problem: content window sizing

While working on the project I came across a problem that I couldn’t solve with the help of the project.

Stand out for general discussion. Even if no one comments - lay out their guesses and the decision, if I find.

Task

The link opens a window that contains some content. The exact dimensions of the content are not known in advance, but it is assumed in advance that they will not exceed a certain “reasonable” limit. Let this limit be, for example, 1000 to 800.

')

After opening, the window is required to take dimensions in accordance with the content, leaving a small, predetermined indent.

Preliminary solution

It was first suggested

1. Open a window with some abstract size. For example, 600 to 500.

2. Resize the window depending on the size of the content.

3. Center content with the method previously found on the pages of the habr.



It turned out about the following

HTML:

<div id="rootDiv">

<div id="popupContainer">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Vestibulum augue metus, lacinia non, sollicitudin nec, tempus vitae, lacus. Phasellus ligula magna, vulputate non, tempus sit amet, ullamcorper id, est. Nam tellus quam, ultrices sit amet, feugiat a, egestas non, mi. Curabitur malesuada tristique nulla. Nullam libero turpis, scelerisque id, ultrices auctor, imperdiet vel, pede.

</div>

</div>



CSS

div#popupContainer

{

background-color: white;

position: absolute;

left: 50%;

padding: 10px;

}

div#rootDiv

{

top: 50%;

left: 0px;

width: 100%;

height: 1px;

overflow: visible;

visibility: visible;

display: block;

position: absolute;

}



Javascript

$(document).ready(function(){

window.resizeTo(

$("#popupContainer").width() + 120,

$("#popupContainer").height() + 160

);

$("#popupContainer").css("margin-left", "-" + ($("#popupContainer").outerWidth() / 2) + "px");

$("#popupContainer").css("margin-top", "-" + ($("#popupContainer").outerHeight() / 2) + "px");

});



Problem number 1

And here, in fact, the problem begins. In part, it is due to the somewhat crooked method of implementation ... So, when resizeTo, the window size changes, and the size of the resulting content area will depend on the presence or absence of toolbars, window titles, etc. and will certainly be different for different browsers. Therefore, the height is taken “with a margin”, but it is impossible to calculate it precisely.



There is a little thought that you can stupidly analyze the size of these indents by

1. Perform resizeTo to some constant value.
2. Measure content area dimensions using document.body.clientWidth , clientHeight or innerWidth , innerHeight respectively
3. Calculate the difference and then otresayzit taking into account this difference

But this method seems to me wrong because of the double resize - it looks bad when the window in front of the user's eyes jumps and slips / spreads.

Problem number 2

It was found in the opera - in other browsers it seems not so noticeable that



It takes some time before the “popupContainer” crawls to its position in the middle of the window, which also creates an unpleasant effect.

Attention question

How could these two problems be solved at minimal cost, and the second, if possible, using purely CSS methods?

Comments and explanations

Update 1

When you open the window given some specific dimensions. By default, divas will stretch to the full width of this window. But the content may turn out to be wider, as there may be any elements inside - both divs and pictures and tables.



So, at a minimum, you need to align the height of the window. If the content does not fit in width, then you have to adjust the width of the window.

Update 2

In principle, the problem (it turns out) can be solved if it is possible to determine the actual size of the window in all browsers. In this case, complex CSS and Javascript constructs dealing with centering will not be required.

Update 3

The solution, as usual, was somewhere nearby: it suffices to use resizeBy instead of resizeTo , and we no longer need the actual size of the window. Then, if we need indents 10 pixels from each edge, it turns out

HTML:

<div id="popupContainer">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed porta. Vestibulum augue metus, lacinia non, sollicitudin nec, tempus vitae, lacus. Phasellus ligula magna, vulputate non, tempus sit amet, ullamcorper id, est. Nam tellus quam, ultrices sit amet, feugiat a, egestas non, mi. Curabitur malesuada tristique nulla. Nullam libero turpis, scelerisque id, ultrices auctor, imperdiet vel, pede.

</div>



CSS

div#popupContainer

{

background-color: white;

position: absolute;

left: 10px;

top: 10px;

}



Javascript

function docWidth() {

return (typeof(window.innerWidth) != 'undefined') ? window.innerWidth : document.body.clientWidth;

}



function docHeight() {

return (typeof(window.innerHeight) != 'undefined') ? window.innerHeight: document.body.clientHeight;

}



$(document).ready(function(){

window.resizeBy(

20 - (docWidth() - $("#popupContainer").outerWidth()),

20 - (docHeight() - $("#popupContainer").outerHeight())

);

});





Well, the problem number 2 was solved as if by itself - the centering now takes place in a “natural” way - due to the resizing of the window.



Thanks for the tip to Ilya Streltsyn aka SelenIT