Archive

Archive for the ‘AJAX’ Category

IE6 Causes Z-Index Nightmares…

Rather than update the post from yesterday, this chaos deserves it’s own post.

Yesterday, I discussed layering Modal Popup Extenders with the Update Progress controls.  In IE7, FF3, and, well, most everything except IE6, it works like a champ as-is.

The “bug”?  After quite a bit of research, the problem revolves around the following issues:

  • lack of support for the { position: fixed } property,
  • lack of support for the { right; bottom} properties,
  • … unreliable suport for {height: 100%, width: 100% } properties,
  • general pain and suffering
  • <SELECT> tags (or ASP:DropDownList objects) exist above any other z-index,

I’m sure there were other issues.  Really.

After spending a good part of the day trying code, looking it up on QuirksMode, and trying again, I have somewhat of a solution; however, I still greatly dislike how it works in IE6.

On the MasterPage, I have a single UpdateProgress that isn’t associated to a specific UpdatePanel.  Therefore, it’ll catch all Async postbacks (and I only have ONE UpdateProgress control).

<asp:UpdateProgress

runat=”server” DisplayAfter=”100″ ID=”UpdateProgress”>

<ProgressTemplate>

<div class=”UpdateProgressModalBackground”></div>

<div class=”UpdateProgressPanel”>

<h3>Please wait…</h3>

<img src=”Images/ajaxbar.gif”
alt=”Please wait…”

style=”text-align: center; width: 100%; height: 10px; />

</div>

</ProgressTemplate>

</asp:UpdateProgress>

This, again, references our UpdateProgressModalBackground and UpdateProgressPanel styles.  These two styles are unchanged from the post yesterday.  Here they are again for reference:

/* UpdateProgressPanel is above EVERYTHING ELSE,

even other modal popups */

.UpdateProgressPanel

{

       z-index: 99999999;

       background-color:#fff;

       color:#fff;

       width: 200px;

       text-align: center;

       vertical-align: middle;

       position: fixed;

       bottom: 50%;

       left: 45%;

       padding: 10px;

       border: solid 2px #5D7B9D;

}

 

.UpdateProgressModalBackground

{

    z-index: 99999998;

    background-color: #6D7B8D;

    position: fixed;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    min-height: 100%;

    min-width: 100%;

    filter: alpha(opacity=50);

    opacity: 0.5;

    -moz-opacity: 0.5;

}

The UpdateProgress and these two classes work just fine in IE7+, FF2+.  So, now to fix IE6..

So, what’s the difference in IE6?  Well, we can’t use the positioning attributes in the above classes–-they won’t work properly. 

Issue #1 – Fitting the Popup and Background Without Positioning Attributes

Searching the web, I found an article by Damien White discussing his his same pains with this.  His solution involved using the IE-specific CSS “expressions” to calculate the height and width of the window.

height:

expression(

        document.documentElement.scrollTop +

        document.documentElement.clientHeight + “px”);

 

width: expression(document.body.clientWidth + “px”);

However, at least for me, Damien’s expressions wouldn’t handle scrolling down the page.

Damien explains:

The thinking behind this was to take the window height (which document.documentElement.clientHeight gives us) and then add the scroll top position, which will give us the upper portion if the user scrolls up.  The problem shows itself when the user scrolls down; that area is not covered.  The good thing about this is that I didn’t need to mess with the body height, but the solution isn’t optimal in the long haul.

That’s a bad deal because that’s the whole point!  Reading a bit more, there was a comment from Kunal Mukherjee on Damien’s post that solved the problem.

Kunal’s expressions looked at the scrollHeight of the window as compared to the offsetHeight and returned the larger.

height: expression(

document.body.scrollHeight > document.body.offsetHeight
? document.body.scrollHeight
: document.body.offsetHeight + ‘px’ )
;

Actually, that works really well. Cool.

Finally, I’d recommend, as Damien did, breaking out your CSS into two files—one for “IE6” and one for everyone else.  This is easily done using the IE-specific conditional statements.

<!–[if lt IE 7]>
<link rel=”stylesheet” type=”text/css” href=”App_Themes/ie6/ie6.css” />
<![endif]–>

I also included !important flags on each of the properties in the ie6.css file—just to be safe.

Issue #2 – IE6 Pushes <SELECT> tags above everything else…

This is where the solution gets dicey; however, I’m relying on Kunal’s solution again.  In his comment, he pointed out a way to hide <SELECT> tags in IE6 without causing the disappearing act that the ModalPopupExtender causes—cover them with an IFRAME.

To me, this hack seems… sketchy at best, but it works.

In the ProgressTemplate of the UpdateProgress control, add in the IFRAME.

<iframe id=”UpdateProgressHideSelect”></iframe>

In the default.css (or the non-ie6.css, whatever you’ve called it), I recommend setting the iframe’s style to {display: none}—it isn’t needed outside IE6, don’t render it. :)

On the ie6.css, add the UpdateProgressHideSelect in—along with another expression to place the iframe over the entire page (like the standard BackgroundCssClass of a ModalPopupExtender):

#UpdateProgressHideSelect

{

    z-index: 15000;

    position: fixed;

    top: 0;

    left: 0;

    background-color: #fff;

    border: none;

    filter: alpha(opacity=0);

    -moz-opacity: 0;

    opacity: 0;

    height: 100%;

    width: 100%;

    display: inline !important;

}

 

* html #UpdateProgressHideSelect

{

    position: absolute;

    height: expression(

document.body.scrollHeight > document.body.offsetHeight

? document.body.scrollHeight

: document.body.offsetHeight + ‘px’);

}

The z-index of 15000 for the iframe ensures that it appears above the normal 10000 of a ModalPopupExtender panel; however, under our crazy high UpdateProgress control.

Problem solved—for now.

Here’s how they look, side by side.

FireFox 3:

FireFox 3 Output

Nice and clean, properly centered given the size of the box and window size.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 7:

IE7 Output

Output as expected and where expected.  Can see drop down lists and MPE behind the UpdateProgress, but cannot access them.

IE 6:

IE6 Output

Output as expected—basically where expected.  Drop down lists are hidden behind the IFRAME to prevent input.  Other controls are visible, including the MPE, but behind the background.

What fun!

Layering Modal Popups using CSS Z-Index

I really like the Modal Popup Extender (MPE) (see various articles here) and the “feel” that it adds to sites.  It’s useful for collecting information, changing information, or simply informing the user that something has happened.

But what happens when you need two popups at the same time?

In a recent project, I used the MPE to provide options when a user added or imported records into a system.  However, I also wanted to provide an UpdateProgress panel that would appear OVER the modal popup panel.  To do this, I needed to redefine the z-index css attributes to properly layer the controls.

My requirements were simple:

  • The MPE should appear over all “pages”.
  • The MPE “Backgrounds” (the BackgroundCssClass of the MPE) should appear just behind the MPE.
  • The UpdateProgress and it’s background should appear over EVERYTHING else.
  • The UpdateProgress and the MPEs should scroll and resize according to the browser.
  • Everything must be cross-browser (of course).

UPDATE: While this works BEAUTIFULLY in IE7, IE8, FF2, and FF3–-it totally borks out in IE6.  Working on a fix nowIE6 Causes Z-Index Nightmares

The Modal Popup Panel

The MPE

The modal popup panel is pretty standard.  The z-index of 1000 basically puts it above most everything else on the screen.

.ModalPopupPanel

{

    z-index: 1000;

    width: 400px;

    border: solid 2px #5D7B9D;

    background-color: #F5F5DC;

    padding: 10px 10px 10px 10px;

}

The UpdateProgress Popup Panel

The UpdateProgress Popup Panel

The UpdateProgress panel is also quite standard—a white box, border, and animated .gif image to keep users entertained during longer processes.  For this, the z-index is set outrageously high just for safety.  Remember: I want the UpdateProgress above EVERYTHING else.

.UpdateProgressPanel

{

/* UpdateProgressPanel is above EVERYTHING ELSE, even other modal popups */

       z-index: 99999999;

       background-color:#fff;

       color:#fff;

       width: 200px;

       text-align: center;

       vertical-align: middle;

       position: fixed;

       bottom: 50%;

       left: 45%;

       padding: 10px;

       border: solid 2px #5D7B9D;

      

}

The Modal Backgrounds

Behind the MPE and UpdateProgress backgrounds, you see a nice blue slate gray color, that’s handled by the ModalBackground class (the BackgroundCssClass attribute of the ModalPopupExtender control. 

.ModalBackground,

.UpdateProgressModalBackground

{

       background-color: #6D7B8D; /* Blue Slate Gray */

       position: fixed;

       top: 0;

       left: 0;

       height: 100%;

       width: 100%;

       min-height: 100%;

       min-width: 100%;

       filter:alpha(opacity=50);

       opacity:0.5;

       -moz-opacity: 0.5;

}

 

.ModalBackground

{

/* Just below a ModalPopupPanel */

    z-index: 999;

}

 

.UpdateProgressModalBackground

{

/* Above everything else, except an UpdateProgressPanel */

    z-index: 99999998;

}

To save some reuse, the ModalBackground and UpdateProgressModalBackground share the same attributes; however, I’ve specified the z-index separately to ensure that the UpdateProgressModalBackground appears ABOVE the regular ModalBackground. 

 

These combine to create a nice layered effect.  Now, even when a MPE is visible, the UpdateProgress still appears over it and prevents user entry.

 

UpdatePanel over MPE

 

 

 

 

A lull…

July 24, 2008 Comments off

As projects wind down, it’s been quite the administrative lull lately.  Projects are done and rolling out the door; paperwork is ramped up and covering my desk. :(  Hopefully, over the next few weeks, some new fun and excitement will jump in the door—including a new project involving mobile devices (yay!).

If not, maybe it’ll give me time to get back into experiment mode and kick around the new ASP.NET MVC Preview 4 and ASP.NET AJAX 4.0 Preview.  I haven’t had nearly enough time to dink at home—all this newfound housework takes a LOT of time and energy. Heh.

Catching Async Postbacks from Server Controls

July 11, 2008 Comments off

In my current project, I created a custom server control that presented the user with questions and answers—they select the answer and move on.

However, a requirement was that the user could push a button and “select all”.  Unfortunately, DropDownList objects are not as easy to select as, say, a CheckBox.  In addition, all controls are dynamically generated—I knew the IDs, but couldn’t specify the Async trigger in the MasterPage’s Script Manager.

I could, however, find the name of the control and do a bit of magic with it.

Here’s how:

First, in your server control, check to see if a ScriptManager control is even present.  For this example, I’m leaving out the try/catches—so we’ll assume that it’s there.

private ScriptManager _scriptManager;

Then, in OnInit (or OnLoad, depending on your controls):

_scriptManager = ScriptManager.GetCurrent(Page);

GetCurrent fetches the current AJAX ScriptManager control from the context you specify—in this case, the current Page object.

Now we’re ready to consume the ScriptManager.  First, we ensure that it’s not null AND, most importantly, that the line of code is being hit during an Async Postback.  Regular postbacks, for the point of updating an UpdatePanel don’t matter to us.

if (_scriptManager != null && _scriptManager.IsInAsyncPostBack)

{

var fromWhere =

_scriptManager.AsyncPostBackSourceElementID;

The ScriptManager’s AsyncPostBackSourceElementID (seriously, can we get longer field names?) provides just that, a hashed heirarchy of the control that caused the Async Postback.  For this to work, it’s important to remember that you must either have ChildrenAsTriggers set to True or have explicitly registered your dynamic control with the ScriptManager.

The hashed output looks like the standard ASP.NET control heirarchy:

ctl00_pbph_tc_ctl01_selectallbutton_123

In this case, when I dynamically created my button, I named it “selectallbutton_{id}” to make it easy to find AND store the information I need in this Select All step.

if (fromWhere.Contains(selectallbutton_”))

       {

var id =

fromWhere

.Substring(fromWhere.IndexOf(‘_’) + 1)

.ConvertTo<int>();

       MyMethod(id);

}

The full code block looks like:

_scriptManager = ScriptManager.GetCurrent(Page);

if (_scriptManager != null && _scriptManager.IsInAsyncPostBack)

{

var fromWhere =

_scriptManager.AsyncPostBackSourceElementID;

 

       if (fromWhere.Contains(selectallbutton_”))

       {

var id =

fromWhere

.Substring(fromWhere.IndexOf(‘_’) + 1)

.ConvertTo<int>();

       MyMethod(id);

}

}

Now my dynamically created button’s Click event is caught during the Async postback (inside an UpdatePanel), validated, and my custom method is executed—in this event, taking the “id” that was part of the Button’s ID and modifying other controls on the page accordingly.

Wrapping TabPanel Tabs With A Simple CSS Change

July 10, 2008 1 comment

The last few weeks have been filled with taking an old ASP legacy application and updating it to ASP.NET.  Fun stuff and not to challenging.

However, a “feature” of the AJAX Control Toolkit’s TabContainer finally hit a nerve.  In the past, I’ve ignored the fact that I couldn’t “wrap” the tabs or set how many rows of tabs to create.  I chalked it up to an annoyance and designed applications with this in mind.

After hunting through the Control Toolkit’s source code, the problem is simple.  There’s a line in the CSS explicitly telling it not to wrap.

Well, recompiling the toolkit can get annoying and hurts mobility of your applications—it’s no fun to bundle “custom” copies for a simple styling change.

.ajax__tab_header

{

    white-space: normal !important;

}

That will override the nowrap that is built into the Toolkit’s CSS.

Hopefully, someday, this will be a boolean property on the TabContainer control.

Using the CLR Profiler with VS2008 Web Projects

Download CLR Profiler for .NET 2.0 Framework.

The CLR profiler is great; it’s sweet to be able to see where memory is allocated and how well objects are disposed of (and whether or not I missed something that GC just isn’t catching). 

The form is pretty easy to use, but there’s a bit of a trick for VS 2008 web application profiling when using the built-in Web Development Server.

NOTE:  This isn’t anything like the ANTS Profiler (which I wish I had a license for, but don’t).  ANTS will tell you where code slowdowns are and more, this simply returns back histographs of object usage, memory, and the stack/heap.  Still very useful none the less.

Here’s how to get started:

1. Download the CLR profiler (see the link at the beginning of this article or click here).

2. Extract the profiler into a directory (it defaults to C:\CLRProfiler); it will extract two directory structures (binaries, source) and a readme document.

3. To start using the application immediately, browse into the Binaries directory and execute the CLRProfiler. 

Use the x86 version. I haven’t been able to get the x64 version to work correctly (even though I’m on a x64 machine) when profiling .NET web applications ala the built-in web development server.

4. Under File > Set Parameters, modify the “Command Line” to reflect the parameters required to start the built-in web development server.  After the parameters have been set, click OK.

Usually, you have a Port parameter and a Path parameter.  Here’s an example:

/port:1234 /path:“J:\Projects\Work\Current\ERC\web\”

5. Click ‘Start Application’.  A browse window will open.  Visual Studio 2008’s web development server is located in the Common Files directory.

%CommonProgramFiles%
    \Microsoft Shared\DevServer\9.0
or
%CommonProgramFiles(x86)
    \Microsoft Shared\DevServer\9.0

6. After selecting the WebDev.WebServer.Exe application file, your server will kick off with the parameters you set.

Now you’re ready to open up a web browser, begin browsing around, and evaluate your application.  When finished, click the ‘Kill Application’ button on the Profiler or simply close the WebServer application.

Visual Studio 2008 and .NET 3.5 SP1 Beta

The blogs are abuzz this morning after the first beta release of the VS2008 and .NET 3.5 SP1.   Download it here.

In my opinion, this isn’t a service pack—this is a new version!

There are quite a few bug fixes (what you normally associate with a service pack), but also a huge list of new additions and improvements.

From Somasegar:

Traditionally our service packs address a range of issues found both through customer and partner feedback as well as our own internal testing.  While this service pack holds true to that theme and delivers updates for these types of issues, it also builds on the tremendous value that Visual Studio 2008 and .NET Framework 3.5 deliver today and enables an improved developer experience by adding a number of additional components that cover a range of highly requested customer features. For example, the service pack is the first release for Visual Studio 2008 that delivers full support for SQL Server 2008 and the ADO.NET Entity Framework.

I’ve posted a few links at the end of the post to the more extensive sources right now, take a look and get ready for the plunge.

So, what am I most excited about?

  • ADO.NET Entity Framework – I’m hoping that the “real” release motivates Oracle to develop provides for the entity framework and my dream of LINQ-esque connections to Oracle will be realized.
  • ASP.NET Routing Engine – As the MVC framework gets closer to a production reality, it’s very motivating to see the underpinnings already in place.
  • VS2008 Performance Improvements – Anything has to be an improvement. :(
  • JavaScript Code Formatting – Sweet, now if I can only get JavaScript intellisense to work. :(
  • LINQ Debug Support – Very nice, love seeing the generated SQL right there at debug time.

There are also lots of updates to WCF and WPF.  Hopefully this summer I’ll have more time to use these .NET 3.0 technologies and maybe be a bit more excited. ;)

Visual Studio 2008 GUI/Tools

The Web Developer Tools team has released a comprehensive list of designer bug fixes, IIS templates and modules, formatting changes, intellisense upgrades, and more on their blog.

MVC and URL Routing

Phil Haack details the effects of the URL routing changes on the MVC Preview releases as well as how it affects the upcoming Preview 3.

Everything

ScottGu, as always does an excellent job tying everything up together—designer, framework, and tooling.

Now, if ReSharper 4.0 would EVER get to RTW before we’re ready to VS2009, it’d be super!

Follow

Get every new post delivered to your Inbox.