Set div to the vertical middle of the browser window

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 http://www.codeplex.com/AjaxControlToolkit/license)
 

function SetVerticalMiddle(element)

{

    //Derived from http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AlwaysVisibleControl/AlwaysVisibleControl.aspx 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 ));

    // element.style.left = x + 'px';

    element.style.top = y + 'px';

}

//copied from AjaxControlToolkit\Common\Common.js, fix from http://forums.asp.net/p/1002123/1323677.aspx#1323677

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;

    break;

        // clientWidth = document.documentElement.clientWidth;

        clientHeight = document.documentElement.clientHeight;

    break;

    case Sys.Browser.Safari:

        // clientWidth = window.innerWidth;

        clientHeight = window.innerHeight;

    break;

    case Sys.Browser.Opera:

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

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

    break;

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

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

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

    break;

    }

    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 @ Friday, September 05, 2008 1:09 PM

Print

Comments on this entry:

# re: Set div to the vertical middle of the browser window

Left by Stuart at 1/2/2009 11:37 PM
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

# re: Set div to the vertical middle of the browser window

Left by dirol at 5/28/2009 9:38 PM
Gravatar
And why does Adobe http://rapid4me.com/?q=Adobe need to have Javascript in their PDF reader?

# re: Set div to the vertical middle of the browser window

Left by web development company at 8/18/2009 3:40 AM
Gravatar
That was inspiring,

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

Anyway, thanks for the post

Your comment:



 (will not be displayed)


 
 
 
 
 

Live Comment Preview:

 
«November»
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345