Geeks With Blogs

News My Blog has been MOVED to https://mfreidge.wordpress.com
Michael Freidgeim's OLD Blog My Blog has been MOVED to https://mfreidge.wordpress.com
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 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 http://rapid4me.com/?q=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: GeeksWithBlogs.net