Use JavaScript to Find the Center of the Browser.

I found myself in a situation where I needed to dynamically display a div in the center of browser’s window without knowing anything about the page or where the user was on it. For example, the user could be at the top of a page or could have scrolled 3000 pixels down. I also wasn’t allowed to use mouse clicks or anything to determine where the users was.

So, to use JavaScript to find the center of the browser’s window regardless of where the user is:

posY = getScreenCenterY();
posX = getScreenCenterX();

dv = document.createElement('div');
dv.setAttribute('id',"css_dialog");
dv.style.cssText = "position:absolute;top:"+posY+"px;left:"+posX+"px;";

function getScreenCenterY() {
var y = 0;

y = getScrollOffset()+(getInnerHeight()/2);

return(y);
}

function getScreenCenterX() {
return(document.body.clientWidth/2);
}

function getInnerHeight() {
var y;
if (self.innerHeight) // all except Explorer
{
y = self.innerHeight;
}
else if (document.documentElement &&
document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
y = document.body.clientHeight;
}
return(y);
}

function getScrollOffset() {
var y;
if (self.pageYOffset) // all except Explorer
{
y = self.pageYOffset;
}
else if (document.documentElement &&
document.documentElement.scrollTop)
// Explorer 6 Strict
{
y = document.documentElement.scrollTop;
}
else if (document.body) // all other Explorers
{
y = document.body.scrollTop;
}
return(y);
}

Many thanks to Quirksmode for this page: www.quirksmode.org/viewport/compatibility.html

Advertisements

8 Responses to “Use JavaScript to Find the Center of the Browser.”

  1. SAM Says:

    great work …. thanks

  2. Steve Says:

    Thanks very much – works great! One quick note that in your conditionals (line 45 for example) maybe when you pasted it converted the ampersand to HTML entities.

  3. Digital Agency Says:

    Works fine, saved me about 30min of fooling about, really appreciate it.

  4. shai Says:

    you can use prototype framework
    (http://prototypejs.org/)
    and use the short version 🙂

    function getScreenCenterY() {
    var y = 0;
    y = document.viewport.getScrollOffsets().top
    +(document.viewport.getHeight()/2);
    return(y);
    }

    function getScreenCenterX() {
    return(document.body.clientWidth/2);
    }

  5. Tanya Says:

    u saved me a lot of work .. thnk you…
    im just still havin one problem i need to disable the scrollbar of this page too, and when i do that the page gets messed up!

    cn u help plz 🙂

    • Shawn Starkey Says:

      Glad to hear it. Regarding the scrollbar, I’ve never messed with it… You could stack the page, put a semi-transparent image on top of the page and then your message/image box on top of that. If they scroll the page will not be clickable due to the image overlay.

      • Tanya Says:

        i solved this issue and im doin like ur sayin but now ive got another problem :S

        im callin my div from code behind using:

        Dim script As String = String.Format(“showHideDiv (‘msg_div’)”)
        ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), UniqueID, script, True)

        and im callin a function before it that execute operations with the database.. in case i removed this function everythn is great and the div shows at the position where he should be but when i put this function the page doesnt give the appropriate result.. this problem is happening in “firefox” and “Chrome” but not in “Internet Explorer”

        any ideas??

  6. Ays Says:

    Searching days for this. It was freaking hard to absolute position my popup window in the browser center after scrolling. Thank you very much!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: