Home Search Member List Faq Register Login  
JavaScript Tips
Center your window on the screen

Thread Starter: Karamasoft   Started: 09-04-2007 7:07 PM   Replies: 0
 Karamasoft Support Forums » General Discussions » JavaScript Tips » Center your window on the screen
 Printable Version    « Previous Thread   Next Thread »
  04 Sep 2007, 7:07 PM
Karamasoft is not online. Last active: 5/8/2018 10:36:45 AM Karamasoft

Top 10 Posts
Joined on 09-05-2004
Posts 6,820
Center your window on the screen

You can center your windows opened with the window.open method on the screen. Both Internet Explorer and Mozilla DOM provide window screen object that has availWidth and availHeight properties to retrieves the width and height of the working area of the system's screen. All you need to do is to get the difference between the screen width (or height) value and the window width (or height) value and divide it by 2.

Since you might want to make this functionality reusable, you can create a wrapper method to call window.open method by replacing its features argument that includes attributes such as width and height. You can parse width and height attributes in the features argument value, and find the appropriate left and top values to center the window and append left and top attributes to the features argument value.

The features argument usually looks like the following:

'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,status=yes,toolbars=no'

First, we need to create a method to parse the width and height values in the features string. Since we might want to use this method for other purposes to split name/value pairs such as parsing query strings to find query string values, let’s make it a generic method.

function GetAttributeValue(attribList, attribName, firstDelim, secondDelim) {
 var attribNameLowerCase = attribName.toLowerCase();
 if (attribList) {
  var attribArr = attribList.split(firstDelim);
  for (var i = 0, loopCnt = attribArr.length; i < loopCnt; i++) {
   var nameValueArr = attribArrIdea.split(secondDelim);
   for (var j = 0, loopCnt2 = nameValueArr.length; j < loopCnt2; j++) {
    if (nameValueArr[0].toLowerCase().replace(/\s/g, '') == attribNameLowerCase && loopCnt2 > 1) {
     return nameValueArr[1];
    }
   }
  }
 }
}

This method takes three arguments: a name/value pair list, the attribute name to retrieve its value, the first delimiter and the second delimiter. The first delimiter will be comma and the second delimiter will be equal sign in this case. The first delimiter would be ampersand and the second delimiter would be equal sign to parse query string variables.

Then define the methods to retrieve available screen width and height values.

function GetScreenWidth() {
 return window.screen.availWidth;
}

function GetScreenHeight() {
 return window.screen.availHeight;
}

We can now create our window.open wrapper method to center the window by using these methods.

function WindowOpenHelper(sURL, sName, sFeatures, centerWindow) {
 var windowLeft = '';
 var windowTop = '';
 if (centerWindow) {
  var windowWidth = GetAttributeValue(sFeatures, 'width', ',', '=');
  windowLeft = (typeof(windowWidth) != 'undefined') ? ',left=' + ((GetScreenWidth() - windowWidth) / 2) : '';

  var windowHeight = GetAttributeValue(sFeatures, 'height', ',', '=');
  windowTop = (typeof(windowHeight) != 'undefined') ? ',top=' + ((GetScreenHeight() - windowHeight) / 2) : '';
 }
 window.open(sURL, sName, sFeatures + windowLeft + windowTop);
}

This method takes four arguments: URL of the document to display, the name of the window, a list of feature items, and a Boolean to indicate whether the window should be centered.

You can now call WindowOpenHelper method in your page.

JavaScript
function OpenWindowCentered(windowWidth, windowHeight) {
 WindowOpenHelper('http://www.karamasoft.com', 'WindowCentered', 'width=400,height=300,location=no,menubar=no,resizable=no,scrollbars=no,status=yes,toolbars=no', true);
}

ASPX
<asp:LinkButton ID="lbOpenWindowCentered" runat="server" OnClientClick="OpenWindowCentered(); return false;">Open window centered</asp:LinkButton>


  
 Page 1 of 1 (1 items)
Karamasoft Support Forums » General Discussions » JavaScript Tips » Center your window on the screen

You can add attachments
You can post new topics
You can reply to topics
You can delete your posts
You can edit your posts
You can create polls
You can vote in polls
Forum statistics are enabled
Forum is unmoderated

© 2002-2018 Karamasoft LLC. All rights reserved.