Geeks With Blogs

News My Blog has been MOVED to
Michael Freidgeim's OLD Blog My Blog has been MOVED to
Our application shows custom HTML confirm message box, that we wanted to locate in the middle of the browser window.
If I would start from the scratch, I would use Ajax Control Toolkit  ModalPopup  
However, because the proprietary code to show div has been already written, I wanted just to set vertical position of the div.
I've created a function based on code from AlwaysVisibleControlExtender.js.
Initially it didn't work, because common.JS getClientBounds : function()  returned 0 clientHeight and clientWidth.
It is actually a known bug in ASP.NET AJAX documentation Control Toolkit, because for  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > it is required to use
document.body.clientWidth instead of document.documentElement.clientWidth.


The created function is below. (I hope that I am compliant with

function SetVerticalMiddle(element)


    //Derived from AjaxControlToolkit.VerticalSide.Middle

    var y = 0;

    // Compute the width and height of the client

    // var CommonToolkitScripts = new AjaxControlToolkit._CommonToolkitScripts();

    // var clientBounds = CommonToolkitScripts.getClientBounds();

    // debugger;

    // var width = clientBounds.width;

    var height = getClientHeight();//clientBounds.height;

    if (document.documentElement && document.documentElement.scrollTop) {

        // x = document.documentElement.scrollLeft;

        y = document.documentElement.scrollTop;


    else {

        // x = document.body.scrollLeft;

        y = document.body.scrollTop;


    // Compute the coordinates

    // x = Math.max(0, Math.floor(x + width / 2.0 - element.offsetWidth / 2.0 ));

    y = Math.max(0, Math.floor(y + height / 2.0 - element.offsetHeight / 2.0 ));

    // = x + 'px'; = y + 'px';


//copied from AjaxControlToolkit\Common\Common.js, fix from

function getClientHeight() {

    /// <summary>

    /// Gets the height of the browser client window (excluding scrollbars)

    /// </summary>

    /// Browser's client height

    /// </returns>

    // var clientWidth;


    var clientHeight;

    switch(Sys.Browser.agent) {

    case Sys.Browser.InternetExplorer:

    // if (document.documentElement && document.documentElement.clientWidth)

    // clientWidth = document.documentElement.clientWidth;

    // else if (document.body)

    // clientWidth = document.body.clientWidth;


        if (document.documentElement && document.documentElement.clientHeight)

            clientHeight = document.documentElement.clientHeight;

        else if (document.body)

            clientHeight = document.body.clientHeight;


        // clientWidth = document.documentElement.clientWidth;

        clientHeight = document.documentElement.clientHeight;


    case Sys.Browser.Safari:

        // clientWidth = window.innerWidth;

        clientHeight = window.innerHeight;


    case Sys.Browser.Opera:

        // clientWidth = Math.min(window.innerWidth, document.body.clientWidth);

        clientHeight = Math.min(window.innerHeight, document.body.clientHeight);


    default: // Sys.Browser.Firefox, etc.

        // clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);

        clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);



    return clientHeight;//new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);



I wasn't able to use position:fixed (that supported by FireFox and IE 7) because the existing div is already inside DOM and not positioned properly without major changes of existing code.(There a a few posts describing hacks(too complicated and restrictive), how to emulate "fixed" in older browsers, e.g. IE 6 workaround for position:fixed,  Making IE 5.5+ use position: fixed ;position:fixed for Internet Explorer)
A few links about ASP.NET AJAX documentation Control Toolkit  ModalPopup:
Posted on Friday, September 5, 2008 1:09 PM AJAX , CSS/DHTML/JavaScript | Back to top

Comments on this post: Set div to the vertical middle of the browser window

# re: Set div to the vertical middle of the browser window
Requesting Gravatar...
Thank you!

I found this blog at about 4am this morning and it brought some sanity to me!

Not quite the same problem - but very similar - here
Left by Stuart on Jan 02, 2009 11:37 PM

# re: Set div to the vertical middle of the browser window
Requesting Gravatar...
And why does Adobe need to have Javascript in their PDF reader?
Left by dirol on May 28, 2009 9:38 PM

# re: Set div to the vertical middle of the browser window
Requesting Gravatar...
That was inspiring,

But couldn't you do it with a simple CSS?

Anyway, thanks for the post
Left by web development company on Aug 18, 2009 3:40 AM

# re: Set div to the vertical middle of the browser window
Requesting Gravatar...
nice tips, thanks
Left by home trends on Feb 14, 2010 9:55 PM

Your comment:
 (will show your gravatar)

Copyright © Michael Freidgeim | Powered by: