PDA

View Full Version : JavaScript Div Center

123456789
01-17-2006, 01:41 PM
How do I make a div align itself in the middle of the page?
Bill Posters
01-17-2006, 01:43 PM
It can be done without using javascript by using CSS…


The most reliable and consistent method for 'dead centering' without tables is (unfortunately) still the negative margin kludge (http://www.wpdfd.com/editorial/thebox/deadcentre1.html).
e.g.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">

html, body {
height: 100%; /* to get page height to fill window area */
}

body {
font: 30px Arial, sans-serif;
padding: 0;
margin: 0;
background: #f00;
text-align: center;
}

p {
position: absolute;
margin: -15px auto auto -50px; /* half of p height auto auto half of box width */
left: 50%;
top: 50%;
color: #fff;
width: 100px;
height: 30px;
line-height: 30px;
vertical-align: middle;
}

</style>
</head>
<body>

<p>Middle</p>

</body>
</html>

There are some relatively minor issues with using this method with MSIE5/Mac, with the result that it won't display dead center unless the window is actually square. It is possible to use a css hack/workaround to allocate a different body height to MSIE5/Mac (e.g. 80%).

MSIE5/Mac CSS hacks:
http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html
http://centricle.com/ref/css/filters/tests/escaped_close/
http://premonition.co.uk/cssd/ie51-only.html
123456789
01-17-2006, 03:57 PM
Thanks, I'll ask if I have further problems.
123456789
01-22-2006, 08:20 PM
How could I make a function that would make a centered-div appear onto the page (visibility=true)
_Aerospace_Eng_
01-23-2006, 12:13 PM
You mean like a fade in?
123456789
02-08-2006, 07:42 PM
I mean when somebody clicks a hyperlink, the div's visibility is set to true (a box suddenly appears centered in the middle of the page)
123456789
02-18-2006, 06:27 PM
ANyone there?
_Aerospace_Eng_
02-18-2006, 06:47 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title></title>
<style type="text/css">
html, body {

}
#container {
width:780px;
margin:auto;
text-align:center;
}
#middiv {
border:1px solid #000;
background:#CCC;
color:#000;
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin:20px 0;
}
</style>
<script type="text/javascript">
function hideDiv()
{
var elem = document.getElementById('middiv');
elem.style.display = (elem.style.display == "block") ? "none" : "block";
}
window.onload = hideDiv;
</script>
</head>
<body>
<div id="container">
<a href="#" onclick="hideDiv();return false">Hide/Show Div</a>
<div id="middiv" style="display:block">Div that is 780px wide centered</div>
</div>
</body>
</html>
123456789
02-18-2006, 08:59 PM
How do I set the width and height of the div in relation with the page? Like set the height of the div to be 50% of the height of the page? or width?
Pegasus
02-18-2006, 09:22 PM
Have you tried changing the width on the container?

Peg
123456789
02-19-2006, 11:56 AM
No yet, but do you mean I can just set it to 50%?
Pegasus
02-19-2006, 02:30 PM
I'm not sure, to be honest. Logically, you should be able to, but I'm not sure if logic works in all cases.

Peg
_Aerospace_Eng_
02-19-2006, 05:53 PM
Are you wanting it to appear directly in the middle of the screen no matter what resolution even if it may overlap content?
123456789
02-25-2006, 07:10 PM
Yes, that's exactly what I want. No matter the resolution is and even if it overlaps other things on the page.
_Aerospace_Eng_
02-25-2006, 07:40 PM
Okay one more question, will the height of this div ever change?
123456789
02-25-2006, 07:49 PM
Yes, the div's height and width can change at any time (because I'm using PHP to put a sentence in the div - so the length of the phrase can differ)
123456789
02-25-2006, 07:50 PM
Well, maybe just the height, I'm not quite sure.
_Aerospace_Eng_
02-25-2006, 10:17 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
background:#FFF;
margin:0;
padding:0;
border:0;
}
#thediv {
width:400px; /*the width isn't too important*/
background:#F00;
border:1px solid #000;
color:#FFF;
position:absolute;
text-align:left;
padding:5px;
top:50%;
left:50%;
}
</style>
<script type="text/javascript">
function hideShow()
{
var elem = document.getElementById('thediv');
elem.style.display = (elem.style.display == "none") ? "block" : "none";
var theTMargin = elem.offsetHeight / 2;
var theLMargin = elem.offsetWidth / 2;
elem.style.marginLeft = -1*(elem.offsetWidth / 2) + 'px';
elem.style.marginTop = -1*(elem.offsetHeight / 2) + 'px';
}
window.onload = function()
{
document.getElementById('thediv').style.display = 'block';
hideShow();
}
</script>
</head>

<body>
<div id="thediv">Test</div>
<div><input type="button" onclick="hideShow()" value="Hide/Show Div"></div>
</body>
</html>
123456789
02-25-2006, 10:17 PM
Also, how do I make a transparent div that covers 100% of the page's height and width so the user cannot click on any hyperlinks on the page while the div is up?
scoutt
02-25-2006, 10:24 PM
by default all divs are transparent.
123456789
02-25-2006, 10:32 PM
Well, how do I make the div span the entire page, so the user cannot click on any of the hyperlinks below it?
scoutt
02-25-2006, 10:47 PM
don't make it transparent so they won't see the links. add a color to it or a image
123456789
02-25-2006, 10:56 PM
But how do I make the div span the entier page?
_Aerospace_Eng_
02-25-2006, 11:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
background:#FFF;
margin:0;
padding:0;
border:0;
height:100%;
}
#content {
text-align:center;
}
#thediv {
width:400px; /*the width isn't too important*/
background:#F00;
border:1px solid #000;
color:#FFF;
position:absolute;
text-align:left;
padding:5px;
top:50%;
left:50%;
z-index:1;
display:none;
}
#noclick {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
width:100%;
height:100%;
position:absolute;
display:none;
background:#666666;
z-index:0;
left:0;
top:0;
}
#content {
z-index:0;
}
</style>
<!--[if IE]>
<style type="text/css">
html {
overflow:hidden;
}
</style>
<![endif]-->
<script type="text/javascript">
function hideShow()
{
var elem = document.getElementById('thediv');
var elem2 = document.getElementById('noclick');
elem.style.display = (elem.style.display == "block") ? "none" : "block";
elem2.style.display = (elem2.style.display == "block") ? "none" : "block";
//elem2.style.position = (elem2.style.position == "absolute") ? "relative" : "absolute";
//elem2.style.zIndex = (elem2.style.zIndex == "0") ? "-1" : "0";
document['body'].style.overflow = (document['body'].style.overflow == "auto") ? "hidden" : "auto";
var theTMargin = elem.offsetHeight / 2;
var theLMargin = elem.offsetWidth / 2;
elem.style.marginLeft = -1*(elem.offsetWidth / 2) + 'px';
elem.style.marginTop = -1*(elem.offsetHeight / 2) + 'px';
}
window.onload = function()
{
document.getElementById('thediv').style.display = 'none';
document.getElementById('noclick').style.display = 'none';
//document.getElementById('content').style.zIndex = '0';
document['body'].style.overflow = 'auto';
}
</script>
</head>

<body>
<div id="noclick">&nbsp;</div>
<div id="thediv"><input type="button" onclick="hideShow()" value="Hide/Show Div"></div>
<div id="content"><input type="button" onclick="hideShow()" value="Hide/Show Div">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</body>
</html>