Position Absolute Center of Page

iam_clint · #1 July 17th, 2007, 09:47 PM

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<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>DivCenter 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:50);

 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.pageYOffset!='undefined')

 OffWindowH=self.pageYOffset;

 else if(document.compatMode && document.compatMode != 'BackCompat')

OffWindowH=document.documentElement.scrollTop;

 else if(document.body && typeof(document.body.scrollTop)!='undefined')

OffWindowH=document.body.scrollTop;

 window.scrollTo(0,0);
 
 return OffWindowH;

}
 
function WindowHeight() 

{

  var WindowHeight = 0;

  if( typeof( window.innerWidth ) == 'number' ) 

  WindowHeight = window.innerHeight;

  else if (document.documentElement &&  document.documentElement.clientHeight) 

  WindowHeight = document.documentElement.clientHeight;

  else if(document.body && document.body.clientHeight) 

  WindowHeight = document.body.clientHeight;
 
  return WindowHeight;

}
 
function pHeight()

{

  var pHeight = OffWindowH() + WindowHeight();

  return pHeight;

}
 
function favBg()

{

  var favBg = document.getElementById('favBg');

  favBg.style.height = pHeight() + 'px';

}

var cdiv = "blank";

function favArea() {

  if (cdiv == "blank") { cdiv = window.setInterval("favArea()", 50); }

 var Element = document.getElementById("favArea");

 objh = parseFloat(Element.style.height)/2;

 objw = parseFloat(Element.style.width)/2;

 Element.style.top = Math.floor(Math.round((document.documentElement.offsetHeight/2)+document.documentElement.scrollTop)-objh)+'px';

 Element.style.left = Math.floor(Math.round((document.documentElement.offsetWidth/2)+document.documentElement.scrollLeft)-objw)+'px';

}

</script>
 
<body onload="favBg(); favArea();">

<div id="favArea" class="favAreaBg"  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="favBgStyle"></div>

<div class="occupySpace"></div>

</body>

</html>

This is another example written by me that will put a div dead center of the window.

Frinavale · #2 February 20th, 2009, 05:07 PM

Where are you using the OffWindowH() and the WindowHeight() methods?
You've declared them but I don't actually see them being used.

Dormilich · #3 February 21st, 2009, 12:17 PM

they are used in pHeight(), line #82.

Frinavale · #4 February 22nd, 2009, 05:07 PM

Oh, I see, thanks :)

hsriat · #5 April 10th, 2009, 09:28 PM

But you can use the CSS alternative too.

Expand|Select|Wrap|Line Numbers

 body {

    margin: 0;

}

#center_div {

    position: fixed;

    height: Hpx;

    width: Wpx;

    top: 50%;

    left: 50%;

    margin: -H/2px -W/2px;

}

heraldmonkey · #6 May 7th, 2009, 05:47 PM

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

Position Absolute Center of Page

re: Position Absolute Center of Page

re: Position Absolute Center of Page

re: Position Absolute Center of Page

re: Position Absolute Center of Page

re: Position Absolute Center of Page

/bytes/development

/bytes/it

/bytes/about