div in middle of screen

[KryptoS]

Hey,

I have a div where I show a little message like ("Loading data..."). I want this always in the middle of my screen.
So I did it with some javascript:

function showdiv() {
var A = document.getElementById(E);
var C = screen.width;
var D = screen.height;
A.style.position ="absolute";
A.style.top = String(Math.round((D-200)/2))+"px";
A.style.left = String(Math.round((C-190)/2))+"px";
A.style.display = "block";
}

css div:
.waitMessage {
display:none;
background-color:#FFF;
border:solid #CCC 4px;
padding:4px;
color:#000;
font-family:Verdana;
font-weight:bold;
position:absolute;
width:380px;
}

my div is 400 height and 380 width. It shows the div in the middle of the screen at the beginning. But when I scroll down and call the action showdiv is shown at the same beginners middle place. Not in the middle of the screen.

thanks

visit my website at

http://www.phpscriptor.com

 

[BillyRayPreachersSon]

Do you want to do this with HTML/CSS alone, or do you want to fix your JS?

If the latter, you should ask in forum216.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[crazy888s]

Regardless of using CSS/HTML or straight javascript, your problem is that you need to use "position:fixed" rather than absolute. Here's the fix with some added code to get the perfectly centered box no matter the size of the box:

javascript:
function showdiv(E){
var A = document.getElementById(E);
var C = window.innerWidth;
var D = window.innerHeight;

//must display block first to have clientWidth and clientHeight
A.style.display = "block";

var elementWidth = A.clientWidth;
var elementHeight = A.clientHeight;

A.style.top = String(Math.round((D-elementHeight)/2))+"px";
A.style.left = String(Math.round((C-elementWidth)/2))+"px";
}

css div:
.waitMessage {
display:none;
background-color:#FFF;
border:solid #CCC 4px;
padding:4px;
color:#000;
font-family:Verdana;
font-weight:bold;
position:fixed;
width:380px;
}

Then assuming your DIV's ID is "waitMessage", show the div with:
showdiv("waitMessage");

When the div is visible, you should also attach to the 'onresize' document event so that this function is called when the browser is resized. This will make sure the div will reset it's position to the milddle.

Hope this helps,
Adam

http://www.TicketWhip.com

- The fastest way to snag your tickets.

 

[KryptoS]

thank you crazy888s that was what I was looking for.

position:fixed;

visit my website at

http://www.phpscriptor.com

 

[feherke]

Hi

You know that [tt]position: fixed[/tt] will not work for almost each fifth visitor ?

( According to W3Schools Browser Statistics in December 2008 there were 19.6% Explorer 6 users. )

Feherke.

http://rootshell.be/~feherke/

 

[crazy888s]

feheke is correct, IE6 does not support position:fixed

There are plenty of fixes for this. For example:

http://tagsoup.com/cookbook/css/fixed/

http://www.webmasterworld.com/css/3592524.htm

(

http://www.google.com/search?q=ie6+position+fixed)

Aye,
Adam

http://www.TicketWhip.com

- The fastest way to snag your tickets.

 

[camyba]

Hi, if you still need i use this for a div to stay in the middle of the screen.

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
height: 100%;
width: 100%;
text-align: center/*for IE5 win*/;
}
#wrapper {
display: table-cell;
vertical-align: middle;
}
#centered {
height: 20em;
width: 30em;
margin: 0 auto;
}
div#centered {
margin-top: expression((
document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) <0 ? "0" :
(document.documentElement.offsetHeight/2)
-(parseInt(offsetHeight)/2) +'px') ;}
</style>

<div id="wrapper">
<div id="centered">
this is your centered div
</div>
</div>
</body>
</html>

 

[KryptoS]

thank you for your replay. I still need to test it with IE6, but IE7 and firefox are working fine.

One more question. Let's say I have 2 'popup' div's shown at the same time. And they are overlapping eachother (totally or just a part), how can I control them so that the first popup is above the other, or that the second popup is at the top?

visit my website at

http://www.phpscriptor.com

 

[southbeach]

To control the position front/back, use z-index ... For the layer on front use a higher value (z-index: 10) and for the layer in the back use a lower value (z-index: 1)


--
SouthBeach
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.