Div in center of screen

Forum Moderators: open

Message Too Old, No Replies

Div in center of screen

How can a div be placed in the center of the screen?

webfoo

2:28 am on May 12, 2008 (gmt 0)

I have a JavaScript that makes a div display when a user clicks a table cell. Otherwise, the div remains hidden. It always appears in the same place on the page (because I inputed pixel coordinates). What I want to know is how to make the div appear in the center of the screen, no matter where in the page the user is - the page is more that one screen long.

Here's the code I have so far. In the <head>:

<script language="Javascript">
function showit() {
document.getElementById('it').style.display='block';
}
function hideit() {
document.getElementById('it').style.display='none';
}
</script>

In the <body>:

<td onClick="showit();" onMouseOver="showit();">Cell Content</td>

<div id="it" style="display: none; position: absolute; left: 50; top: 50;">
<table width="650" style="background-color: #CCCCCC; border: 2px solid navy; font-family: Verdana; font-size: 10pt;">
Div Content
</div>

Any ideas?

rocknbil

5:01 pm on May 12, 2008 (gmt 0)

Javascript is probably not necessary (only needed to show/hide.) You want to set a width on the div and margin to auto, no absolute positioning. Since you have a set width on the table, you make it easy.


<style type="text/css"> 
#it { display: none; width:650px; margin:auto; } 
#it table {  
  width: 650px;  
  background-color: #CCCCCC;  
  border: 2px solid navy;  
  font-family: Verdana; font-size: 10pt; } 
</style>


<div id="it"> 
<table><tr><td> 
Div Content 
</td></tr></table> 
</div>

Although one would wonder why you need to use the inner table. If you have multiple rows, just use divs:


<style type="text/css"> 
#it { display: none; width:650px; margin:auto; } 
#it .dark, #it .light {  
  width: 650px;  
  background-color: #CCCCCC;  
  border: 2px solid navy;  
  font-family: Verdana; font-size: 10pt;  
} 
#it .light { background-color: #eeeeee; color: #000000; } 
</style>


<div id="it"> 
 <div class="light">Light BG</div> 
<div class="dark">Dark BG</div> 
</div>

Remove the "display:none" to see the effect.

poppyrich

11:58 pm on May 17, 2008 (gmt 0)

@Rock

Sorry, but I'm missing the centering in your example. All I'm seeing is a left aligned div 650% wide.

poppyrich

12:22 am on May 18, 2008 (gmt 0)

The following function will position a div dead center in the viewport both width and height. Window resized, scrolled, whatever. Cross browser, too, although I haven't tested it thoroughly.
Verbose, but all the better to understand what it's measuring and doing...

function showdeadcenterdiv(Xwidth,Yheight,divid) {
// First, determine how much the visitor has scrolled

var scrolledX, scrolledY;
if( self.pageYOffset ) {
scrolledX = self.pageXOffset;
scrolledY = self.pageYOffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrollTop;
}

// Next, determine the coordinates of the center of browser's window

var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}

// Xwidth is the width of the div, Yheight is the height of the
// div passed as arguments to the function:
var leftOffset = scrolledX + (centerX - Xwidth) / 2;
var topOffset = scrolledY + (centerY - Yheight) / 2;
// The initial width and height of the div can be set in the
// style sheet with display:none; divid is passed as an argument to // the function
var o=document.getElementById(divid);
var r=o.style;
r.position='absolute';
r.top = topOffset + 'px';
r.left = leftOffset + 'px';
r.display = "block";
}

webfoo

6:12 pm on May 19, 2008 (gmt 0)

Sorry guys, I've been away for a while. Thank you all for contributing. Poppyrich, your script seems to work the best, at least on XP with IE7, FF 1.5, and Opera 9.20.