CODEWITHSUNDEEP
javascripthtmlcssoverlay
Kosmo零
Kosmo零

Reputation: 4151

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

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. enter image description here

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

Upvotes: 0

Views: 1009

Answers (2)

Mouser
Mouser

Reputation: 13304

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";

Upvotes: 1

zardilior
zardilior

Reputation: 2978

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
   });

Upvotes: 1

Related Questions