Popups that resize themselves

In your ASPX page, add the following such that it renders in the top-right of the popup window

And add this code such that it renders in the bottom-left of the popup window

Then add the following Javascript to your page and make a call to resizeThisWindow().

// Default window dimensions to add to the size we 'read' from the divs var _modifyX = 18; var _modifyY = 30;  function resizeThisWindow() {   var divX = document.all['divMarkerX'];   var divY = document.all['divMarkerY'];    var x = getAbsX(divX);   var y = getAbsY(divY);    //stop it becoming too big, for little monitor support   if ( x > 800 ) {     x = 800;   }    if ( y > 600 ) {     y = 600;   }      window.resizeTo(x + _modifyX, y + _modifyY);   //alert(x +" " + y); }   function getAbsX(elt) {   return parseInt(elt.x) ? elt.x : getAbsPos(elt,"Left"); }   function getAbsY(elt) {   return parseInt(elt.y) ? elt.y : getAbsPos(elt,"Top"); }   function getAbsPos(elt,which) {   iPos = 0;   while (elt != null) {     iPos += elt["offset" + which];     elt = elt.offsetParent;   }   return iPos; }

The modify X and Y values take into account default window scrollbar widths etc therefore users with non-standard settings may see things differently.

If you use master pages, put the above into a seperate template for popup windows and override the default X and Y in the implementation pages if they use scrollbars etc.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s