Archive for March, 2008

If you have ever tried to perform an action within an iFrame when a window is resized then you would notice that using the “onresize” event of the body element within the iFrame is useless. For some reason, the “onresize” event of the page within the iFrame does not fire when the window itself is resized, so attaching a “onresize” event to the body tag of the page doesn’t work.

So basically this is the structure of your page:


<html>
<head></head>
<body>

<iframe id="myIframe" src="iframepage.html"></iframe>

</body>
</html>

Now you want to capture the “onresize” event of the window in your iframe so you can manipulate your interface or do something when it occurs. On a regular page (which has no iframes), placing this in your ‘body’ tag would help.

However, in your iFrame page, using the following will allow you to capture the ‘onresize’ event.

<script>
self.parent.window.attachEvent(”onresize”, myFunction);
</script>

Place the script tag on your page and it will attach the function to the event.

Posted by Ramesh Bhaskar on 12 March 2008 at 2:17 am under Programming, asp.net.
Comment on this post.

Most problems with regards to the modalpopupextender not displaying at the center of your page when co-ordinates are not specified arise due to an incorrect DOCTYPE. Usually changing this DOCTYPE will help (as I have pointed out in a previous post of mine). However sometimes it is not possible to change the DOCTYPE as it affects other portions of your page.

In order to fix that you may have to perform a custom build of the AjaxControlToolkit by modifying some of the source.

I’ve tested this out with version 1.0.10920.0 of the AjaxControlToolkit, however I’m sure it works with later versions.

Download the source of the toolkit from codeplex and open the solution using Visual Studio.

The first file you will have to modify is the ‘Common.js’ which is located in ‘AjaxControlToolkit\Common\Common.js’ .

Within this search for the function ‘getClientBounds’. Replace the switch statement with the following one:


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;
//clientWidth = document.documentElement.clientWidth;
if (document.documentElement && document.documentElement.clientHeight)
clientHeight = document.documentElement.clientHeight;
else if (document.body)
clientHeight = document.body.clientHeight;
//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;
}

The next set of changes to be made are to the ‘initialize’ function of the ModalPopupExtender which is located in the ‘AjaxControlToolkit\ModalPopupExtender\ModalPopupBehavior.js’ file.

Within the ‘initialize’ function search for


this._backgroundElement.style.position = 'fixed';

and change it to this


this._backgroundElement.style.position = 'absolute';//'fixed';

A few lines below that is another change that has to be made from:


this._foregroundElement.style.position = 'fixed';

to:


this._foregroundElement.style.position = 'absolute';//'fixed';

Once you have made the changes compile the source and you should be able to use your new AjaxControlToolkit.dll in order to resolve most of the centering issues known to occur with the ModalPopupExtender.

Make sure to backup your original files before you attempt this.

Posted by Ramesh Bhaskar on 3 March 2008 at 9:48 pm under Programming, asp.net.
16 Comments.