How to make div to overlay browser viewport without fixed position?

Question

Please, no "fixed" solutions... It does not work in IE8 in quirks mode, but this is what I need.

I write this JS:

function isNumber(n)
{
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function getHighestZIndexIn(start_elem, include_static_elems)
{    
    var curr_elem = start_elem ? start_elem : document.body;
    var current_highest = curr_elem.style.zIndex;

    for (var i = 0; i < curr_elem.children.length; i++)
    {
        if (!include_static_elems && (!curr_elem.children[i].style.position || curr_elem.children[i].style.position.toLowerCase() == "static"))
            continue;

        var temp_highest = getHighestZIndexIn(curr_elem.children[i]);

        if (!isNumber(temp_highest))
            continue;

        if (!isNumber(current_highest))
        {
            current_highest = temp_highest;
            continue;
        }

        if (current_highest < temp_highest)
            current_highest = temp_highest;
    }

    return current_highest;
}

function createPopupPanel(header, with_content, header_color, tbl_bg_color)
{
    var hzi = getHighestZIndexIn(null, true);
    hzi = hzi ? hzi + 1 : 1;
    var div_id = "temp_div_" + new Date().getTime();

    var bg_div = document.createElement("div");
    bg_div.style.position = "absolute";
    bg_div.style.zIndex = hzi;
    bg_div.id = div_id;
    bg_div.style.width = bg_div.style.height = "100%";
    try { bg_div.style.backgroundColor = "rgba(100, 100, 100, 0.5)"; }
    catch (exc) { bg_div.style.backgroundColor = "gray"; } //ie6, ie7, ie8 fix
    bg_div.style.left = bg_div.style.right = bg_div.style.top = bg_div.style.bottom = "0px";

    var main_div = document.createElement("div");
    main_div.style.position = "absolute";
    main_div.style.width = main_div.style.height = "80%";
    main_div.style.left = main_div.style.right = main_div.style.top = main_div.style.bottom = "10%";

    var table = "<table cellspacing = '0' cellpadding = '0' style = 'width: 100%; height: 100%'>";
    table += "<tr><td style = 'background-color: " + header_color + ";'>" + header + "</td><td style = 'cursor: pointer; background-color: red; width: 1px; height: 1px;' onclick = \"document.body.style.overflow = 'auto'; document.body.removeChild(document.getElementById('" + div_id + "'));\">Close</td></tr>";
    table += "<tr><td colspan = '2' style = 'background-color: " + tbl_bg_color + ";'>" + "<div style = 'position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%;'><div id = '" + div_id + "_content_container' style = 'position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; overflow: auto;'>" + with_content + "</div></div>" + "</td></tr>";
    table += "</table>";

    main_div.innerHTML = table;
    bg_div.appendChild(main_div);

    document.body.style.overflow = "hidden";
    document.body.appendChild(bg_div);

    return div_id + "_content_container";
}

And this test page:

<html>
    <head>
        <title>test ppanel</title>
        <script type = "text/javascript" src = "libs/ppanel.js"></script>
    </head>

    <body>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
        <input type = "button" value = "create div" onclick = "createPopupPanel('asd', 'dsa', 'LightBlue', 'GhostWhite');" />
        <p>asd</p><p>asd</p><p>asd</p><p>asd</p><p>asd</p>
    </body>
</html>

enter image description here Then I press any button and the panel appears at the page top.

Is there any way I can place my div right at viewport and make it dynamically change it's size at window resizes?

Just… don’t use quirks mode…. Fixing that might take some effort, but it’s worth it. — Ry-, Dec 27 '14 at 20:59
Sorry, I write from the beginning that this is what I need. If I use standard mode, then everything will go broken. — Kosmo零, Dec 27 '14 at 21:00
It's impossible for me, because it's vertical aligning, that is impossible to do without fixed sizes, like `line-height`, but all my stuff relays on % set positions and sizes. ALL STUFF. — Kosmo零, Dec 27 '14 at 21:03
As U2744... have said; don't use quirks mode. If something goes broken, fix that before using quirks mode. Quirks mode === IE5.5, you really don't want it ... — Teemu, Dec 27 '14 at 21:10
try to fix this: ` test vertical aligning

Make me vertical aligned without setting any sizes to fixed values, like 'px'

` — Kosmo零, Dec 27 '14 at 21:12
The snippet in your previous comment won't work. The `style` attribute within `html` will override the `x-ua compatible`... — Teemu, Dec 27 '14 at 21:15
@Teemu - What means it not work? It renders fine enough in any browser. The only problem that is impossible to vertical align the inner content without setting fixed sizes or using `display: table-cell;` that leads to another bugs. — Kosmo零, Dec 27 '14 at 21:19
The `x-ua compatible` is for IE only, and it's not working in your snippet. Use a proper HTML5 DTD and no `x-ua compatible` at all. Notice, that IE8 is a HTML4 browser, and anything you need to implement in HTML5, needs a proper shim for that. Search for a "modernizer" or "HTML5 shim" to get shims you really need. — Teemu, Dec 27 '14 at 21:31
@Teemu - will this make vertical aligning work? I don't think so. I googled for a long time and all solutions I found are related with settings fixed sizes or using `display: table-cell;` that leads to even more bugs. — Kosmo零, Dec 27 '14 at 21:38
@Teemu - sorry, but which way? `vertical-align` aligns in text line height only, while `display: table-cell;` leads to incorrect height calculations (http://stackoverflow.com/questions/25119868/why-my-heights-fixer-code-work-wrong-when-browser-window-restored-after-being-ma) of elements placed in such container. — Kosmo零, Dec 27 '14 at 21:48

score 1 · Answer 1 · answered Dec 27 '14 at 21:06

There is a way. I usually achieve this with jquery using:

  $(window).width() //to get window width
  $(window).height() // to get window height
  $('#id').width(val) // to change the width accordingly

For positioning I use a display:absolute in css changing

  $('#id').css('left',$(window).width*percentage); //as an example

usually for the top property you have to consider other elements unless you just want it on top All of this code must run under a

   $(window).resize(function(){
        //to get new window dimensions
         var windowwidth = $(window).width();
         var windowheight = $(window).height();
       //resizing code
   });

Well, thanks. Actually, I don't use jQuery or whatever it is, but I think it's still a solution. — Kosmo零, Dec 27 '14 at 21:23

Mouser · Accepted Answer · 2014-12-27T21:20:16.300

1

If, during the pop up, the background stays static, ergo no elements are appended or changed. You can use this:

 //store window scroll values
 var storeScroll = [document.body.scrollLeft, document.body.scrollTop]; //x, y
 document.body.style.overflow = "hidden";
 window.scrollTo(0, 0);

 //when the pop is closed revert back to scroll position
 window.scrollTo(storeScroll[0], storeScroll[1]);
 document.body.style.overflow = "auto";

edited Dec 27 '14 at 21:20

answered Dec 27 '14 at 21:06

Mouser

13,132
3
28
54

I already disabling the scrolling. But you game me some interesting idea... If I try to set scroll back at most top point, then everything will be fine. P.S. Your solution is half work... The overlay really cover whole height, but the inner div also too high height and does not fits the screen. – Kosmo零 Dec 27 '14 at 21:14
In popup function scroll back up using `window.scrollTo(0, 0)` – Mouser Dec 27 '14 at 21:15
Haha, I only written about this and you already provided the solution. Well, considering I will make so for IE8 only, those guys can live with that. – Kosmo零 Dec 27 '14 at 21:17
Now you gave even better solution with restoring scroll. Thank you. – Kosmo零 Dec 27 '14 at 21:22
When you do it, make it as user-friendly as possible :-). Glad to be of service. – Mouser Dec 27 '14 at 21:22

How to make div to overlay browser viewport without fixed position?

2 Answers2