PDA

Click to See Complete Forum and Search --> : always unhide a div in the center of screen.

lehula
06-25-2007, 11:31 AM
Is there any kind of attributes that I can add to a hidden div that will make it so that it unhides in the center of the screen, regardless of where I'm scrolled on the webpage. thanks
toicontien
06-25-2007, 03:59 PM
Kind of. You could use fixed positioning, but Internet Explorer doesn't support it, so a few hacks are required. Start out with this HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Doc</title>
<style type="text/css" media="screen">
<!--
@import "layout.css";
-->
</style>

<!--[if IE]>
<style type="text/css" media="screen">
@import "fix_internet_explorer.css";
</style>
<![endif]-->

</head>
<body>
<div id="fixIE">
<div id="page">
<!-- Your entire page goes here -->
</div>
</div>

<div class="floater" id="f1">Your Message</div>

</body>
</html>
Now in layout.css:
/* layout.css */

body {
margin: 0;
padding: 0;
}

.floater {
background-color: #ccc;
height: 500px;
left: 50%;
margin: -250px 0 0 -250px;
position: fixed;
top: 50%;
width: 500px;
}
The width and height must be set. A negative top and left margin is used to pull the floating box into the center of the screen after the box is positioned half way down and half way across the screen. Now, to fix IE-Win using the fix_internet_explorer.css file...
/* fix_internet_explorer.css */

body, html {
height: 100%;
}

body {
overflow: hidden;
}

#fixIE {
height: 100%;
overflow: auto;
}

.floater {
position: absolute;
}
Since IE-Win doesn't support fixed positioning, we'll use absolute positioning instead. But absolute and fixed positioning don't do the same thing. You want the box to stay put as you scroll. That's why we make the BODY and HTML tags' heights 100%, and we hide the overflow of the BODY tag. Hiding the overflow of course removes the scrollbars from the window, so using the #fixIE DIV tag, you make it 100% height and set its overflow to auto, which will make scroll bars appear when needed.

Then inside the #page DIV is where you'll put the contents for your web page. Since the floater DIV tag is outside the #fixIE DIV, when it appears it will appear over top of the page. In standards browsers, the fixed positioning takes over and keeps that box anchored in place as you scroll. The little hack we used for IE-Win makes the #fixIE DIV scrollable instead of the BODY tag. And since the floater DIV is outside the #fixIE DIV, the floater DIV will never scroll with the page contents, thus emulating fixed positioning in Internet Explorer.