[SOLVED] How to get the center of the window?

[julia k]

hello!

 

I'm struggling for last two days to find out a way to absolutely position an element on the center of the screen. Right now I'm using these two functions to get the width and height of the window:

 

        getWidth : function()
        {
            var Width = 0;
            if (typeof(window.innerWidth) == 'number') {
                return Width = window.innerWidth;
            }
            else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                return Width = document.documentElement.clientWidth;
            }
            else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                return Width = document.body.clientWidth;
            }
            return Width;
        },
        getHeight : function()
        {
            var Height = 0;
            if (typeof(window.innerWidth) == 'number') {
                return Height = window.innerHeight;
            }
            else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
                return Height = document.documentElement.clientHeight;
            }
            else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
                return Height = document.body.clientHeight;
            }
            return Height;
        }

 

This code works great if the window doesn't have a scrollbar, but if there is a scrollbar and, let's say that I have a button which when clicked will display a popup window or a div in the center of the screen the popup window or the div will not be visible unless I scroll the window to the top...

 

Can anyone show me how to display an object in the center of the screen so I don't have to scroll the window back to top?

 

Thank you in advance

[Psycho]

You don't need Javascript to center an element - just CSS.

 

Take a look at the code on this page. Even when I modified the code to be long enough that the page scrolled, the box still apppeared in the center of the visible page.

 

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

[Psycho]

After taking some time to reverse-engineer the code, here is all you need to center a div on the page:

#content
    {
position: absolute;

left: 50%;
width: 250px;
margin-left: -125px;

top: 50%;
height: 70px;
margin-top: -35px;
    }

 

If you need a differnt size div, just ensure the margins are negative values for 1/2 the width and height.

[julia k]

wow! Thank you very much, mjdamato, that really helped!

 

I have a great experience with CSS, I mean I can do a lot of things with it, but i have an other question related to that code: Why is there the need for margin-left and margin top when the left and top attributes are already set? because this is why my code wasn't working in the first place. Can you please explain me why? I'd hate to just move on without actually knowing the answer to this question.

 

Thanks again

 

[Psycho]

When positioning an element using absolute positioning it is done so relative to the top-left position of the element. So, if you used top:50% and left:50%, it will set the top-left corder of the element to the center of the page. But, to get the entire element positioned in the center you will need to offset half the height and half the width. That is what the negative values are for. Try removing those values from the attributes and you will see what I mean.

[julia k]

(slaps head) now that makes sense

 

thank you very much!