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 AjaxControlToolkitCommonCommon.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:
 
Advertisements

How to detect Debug mode in JavaScript

I’ve asked a question on forum:

AJAX ScriptManager Class  has a IsDebuggingEnabled property, that is available in server code. I want in my client Javascript function to determine, do I running debug or release mode.

MS Online Community Support suggested :

You can create a hidden field to the page, then, check the IsDebuggingEnabled property of ScriptManager , if it is true, set the value of the hidden field to “true”, else, false.

It will work, but I expected the method available in some AJAX client library class.

How to use different client AJAX UpdatePanel error handling for different UpdatePanels?

I have an ASP.NET AJAX page with several UpdatePanels. If error occured during asyncronous postback, I want to ignore it for some panels and show errors for other updatepanels. The samples that I found(like  Customizing Error Handling for ASP.NET UpdatePanel Controls.) suggested to call add_endRequest and from EndRequestEventArgs  use error Property  .

 Dave Ward suggested that In EndRequest, you can check sender._panelsToRefreshIDs. It’s a JavaScript array of UpdatePanel IDs being updated in the partial postback

My question on forum is how can I find which of UpdatePanels caused the particular Request in EndRequestHandler?

I found an idea in comments of How to handle a timeout in an async postback to use response Property (Sys.Net.WebRequestExecutor class.) Then I can access webRequest Property , but what to do next?

Jin-Yu Yin from MSFT  suggested to follow these steps:

1. Get which UpdatePanel is updating at the server side. Check these links:

UpdatePanel.IsInPartialRendering Property

Gets a value that indicates whether the UpdatePanel control is being updated as a result of an asynchronous postback.

The IsInPartialRendering property is intended for use by control developers who want to know when an UpdatePanel control is being updated as a result of an asynchronous postback.

Which UpdatePanel issued an Async Postback Call?

how to get which UpdatePanel has posted

2. use try… catch to catch errors, and in catch block, create an new exception which contain information of which updatepanel is updating and throw it.

3. check the information in the error at the client side, process the error based on the information

 

Problems after Installing VS 2008 side-by-side with VS 2005

I have Visual Studio 2005 environment and decided to try VS 2008. I’ve read some articles(e.g. here) about site-by-site installation and had an impression, that making a copy of solution is enough.

NOTE: If you are using TFS, before conversion of the existing solution, obtain and install  Team Explorer Client .
VS 2005 is using TFS Source Control, but VS 2008 shows no Source Control plug-in installed.
.

After installing of VS 2008  I’ve copied my existing solution as MySolution2008 and opened it in Visual Studio 2008. The upgrade wizard told me that upgrade will be done in place(no backup option in the wizard) Then it showed that it converted also project files.

Then I open original Solution2005.sln in VS 2005. However wizard suggested me to upgrade to the latest version< so I wasn’t able to open existing solution in VS 2005.I’ve followed the recomendation to restore file association in VS from Tools->option->Environment->General , then click the  “Restore File Assoications” button on the dialogue.

It allowed me to open solution in 2005. However I’ve noticed that generated files (such as typed datasets and web references) were modified.The reason is that the projects were updated with extra attributes

<Project DefaultTargets=”Build” xmlns=”http://schemas.microsoft.com/developer/msbuild/2003″ ToolsVersion=”3.5“>

and extra elements <OldToolsVersion>2.0</OldToolsVersion>.

Furthermore, for a few projects it was recommended  to open in Browse mode, because they have unsafe Includes. It also changed the path

<Import Project=”$(MSBuildExtensionsPath)MicrosoftVisualStudiov9.0WebApplicationsMicrosoft.WebApplication.targets” Condition=”” />

After fixing these changes I was able to restore my VS 2005 solution back to normal.
The similar posts , that helped me, are Moving Projects/Solutions between Orcas and Visual Studio 2005 ,
Rick Strahl‘s ‘Migrating Web Application Projects between VS 2005 and VS 2008
Multi-Targeting VS2005 and VS2008 Web Application Projects, a Gotcha!  -shows how to add conditional entries Condition=”‘$(Solutions.VSVersion)’ == ‘8.0’”/>

 

References to AJAX DLLs

After a few weeks after VS 2008 installation after reboot I’ve noticed that my web.config got extra
<add assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>
    <add assembly=”System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089″/>
    <add assembly=”System.Data.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089″/>

It caused WMIPRVSE.EXE to take 100% CPU , because of endless errors:

System.Web.HttpCompileException: error CS0433: The type ‘System.Web.UI.ScriptManager’ exists in both ‘c:WINDOWSassemblyGAC_MSILSystem.Web.Extensions3.5.0.0__31bf3856ad364e35System.Web.Extensions.dll’ and ‘c:WINDOWSassemblyGAC_MSILSystem.Web.Extensions1.0.61025.0__31bf3856ad364e35System.Web.Extensions.dll’

I had to delete the extra entries.

ASP.Net Ajax UpdatePanel links.

I’ve tried to investigate slow load of UpdatePanel. It works quick enough in FireFox, slow in IE 7 and even more slower in IE6.

I found a few related links:

In production make sure that <compilation debug=false> is in your web.config(tip from http://forums.asp.net/thread/1635011.aspx).

Delayed load with an UpdatePanel and similar post.

The top 10 mistakes when using AJAX recommends do not  put everything in a UpdatePanel.
Are you making these 3 common ASP.NET AJAX mistakes?” suggest to use  IsPostBack, IsInAsyncPostBack and __EVENTTARGET to avoid redundant execution of code during partial postbacks.

The article “Build Google IG like Ajax Start Page in 7 days using ASP.NET Ajax and .NET 3.0” shows(among other intersting things) how to consider what to include into UpdatePanes.

Dynamic User Control, Ajaxify your controls suggests an alternative to UpdatePanel without instantiation the full page ,but the user control CANNOT depend on the page it lives in.

Loading UserControl Dynamically in UpdatePanel

Post “How to solve slow reponse with ASP.NET AJAX in IE 6?” suggests(among others)  to apply IIS compression to imporove the loading time.(NOT SURE HOW?) 

 UpdatePanel: having fun with errors describes 3 techniques to handle errors. I prefer server logging using OnAsyncPostBackError=”HandleError” . The ideas are detailed in Customizing Error Handling for ASP.NET UpdatePanel Controls. See also Asp.net Ajax Exception Logging and How to improve ASP.NET AJAX error handling

 

Avoid calling unneseccary procedures during partial Update:

            ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
            if ((scriptManager != null) && (scriptManager.IsInAsyncPostBack))
            { //ASSUMPTION: the control is not included in AJAX UpdatePanel
                return;
            }

Update after Damian Edwards‘s presentation “ASP.NET AJAX Tips and Tricks”
1. Always specify <UpdatePanel UpdateMode=”conditional”>
2. If there is no UpdatePanel on the page, specify ScriptManager.EnablePartialRendering=”false”.
3. Specify ChildrenAsTriggers=false, if you want to specify triggers explicitely
3. JavaScript calls _doPostBack(‘<%=btnTrigger.UniqueID %>
$get(“ID”)