Position Absolute Center of Page

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • iam_clint
    Recognized Expert Top Contributor
    • Jul 2006
    • 1207
    #1

    Position Absolute Center of Page

    [CODE=HTML]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DivCente r Experiment</title>
    </head>

    <style>
    body, html
    {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    }

    .favBgStyle
    {
    border: 0px;
    padding: 0px;
    margin: 0px;
    width: 100%;
    position: absolute;
    background-color: #000000;
    opacity: 0.5;
    filter: Alpha(opacity:5 0);
    z-index: 0;
    }

    .favAreaBg
    {
    border: 0px;
    padding: 0px;
    position: absolute;
    background-color: #FFFFFF;
    z-index: 1;
    }

    .occupySpace
    {
    height: 1500px;
    }
    </style>

    <script>
    function OffWindowH()
    {
    var OffWindowH=0;

    window.scrollTo (0,10000000);

    if(typeof self.pageYOffse t!='undefined')
    OffWindowH=self .pageYOffset;
    else if(document.com patMode && document.compat Mode != 'BackCompat')
    OffWindowH=docu ment.documentEl ement.scrollTop ;
    else if(document.bod y && typeof(document .body.scrollTop )!='undefined')
    OffWindowH=docu ment.body.scrol lTop;
    window.scrollTo (0,0);

    return OffWindowH;
    }

    function WindowHeight()
    {
    var WindowHeight = 0;
    if( typeof( window.innerWid th ) == 'number' )
    WindowHeight = window.innerHei ght;
    else if (document.docum entElement && document.docume ntElement.clien tHeight)
    WindowHeight = document.docume ntElement.clien tHeight;
    else if(document.bod y && document.body.c lientHeight)
    WindowHeight = document.body.c lientHeight;

    return WindowHeight;
    }

    function pHeight()
    {
    var pHeight = OffWindowH() + WindowHeight();
    return pHeight;
    }

    function favBg()
    {
    var favBg = document.getEle mentById('favBg ');
    favBg.style.hei ght = pHeight() + 'px';
    }
    var cdiv = "blank";
    function favArea() {
    if (cdiv == "blank") { cdiv = window.setInter val("favArea()" , 50); }
    var Element = document.getEle mentById("favAr ea");
    objh = parseFloat(Elem ent.style.heigh t)/2;
    objw = parseFloat(Elem ent.style.width )/2;
    Element.style.t op = Math.floor(Math .round((documen t.documentEleme nt.offsetHeight/2)+document.doc umentElement.sc rollTop)-objh)+'px';
    Element.style.l eft = Math.floor(Math .round((documen t.documentEleme nt.offsetWidth/2)+document.doc umentElement.sc rollLeft)-objw)+'px';
    }
    </script>

    <body onload="favBg() ; favArea();">
    <div id="favArea" class="favAreaB g" style="width: 500px; height: 400px;"><table width="100%" height="100%">< tr><td valign="middle" align="center"> This is dead center</td></tr></table></div>
    <div id="favBg" class="favBgSty le"></div>
    <div class="occupySp ace"></div>
    </body>
    </html>
    [/CODE]


    This is another example written by me that will put a div dead center of the window.
    Tags: None
    • Frinavale
      Recognized Expert Expert
      • Oct 2006
      • 9749
      #2
      Where are you using the OffWindowH() and the WindowHeight() methods?
      You've declared them but I don't actually see them being used.

        Comment

        • Dormilich
          Recognized Expert Expert
          • Aug 2008
          • 8694
          #3
          they are used in pHeight(), line #82.

            Comment

            • Frinavale
              Recognized Expert Expert
              • Oct 2006
              • 9749
              #4
              Oh, I see, thanks :)

                Comment

                • hsriat
                  Recognized Expert Top Contributor
                  • Jan 2008
                  • 1653
                  #5
                  But you can use the CSS alternative too.
                  Code:
                  body {
    margin: 0;
}
#center_div {
    position: fixed;
    height: [I]H[/I]px;
    width: [I]W[/I]px;
    top: 50%;
    left: 50%;
    margin: -[I]H/2[/I]px [I]-W/2[/I]px;
}

                    Comment

                    • heraldmonkey
                      New Member
                      • May 2009
                      • 1
                      #6
                      CSS fits perfectly

                      Hi hsriat,
                      Thanks for the CSS, it worked perfectly for what I needed.

                        Comment

                        Previous template Next
                        Working...