Microsoft

Resize windows dynamically

Once a subwindow is launched, its size doesn't need to remain static. Learn how to resize windows dynamically.

By Brent Lee Metcalfe

Once a subwindow is launched, its size doesn't need to remain static.

When the onClick event handler fires, the subwindow increases or decreases its width and height by 200 pixels.

var x = 0;

function resizeMe() {
  if (x == 0) {
    self.resizeBy(200,200);
    x = 1;
  }
    else {
      if (x == 1) {
        self.resizeBy(-200,-200);
        x = 0;
      }
    }
}

Function resizeMe() lets users toggle between the two sizes using the window resizeBy() method. resizeBy() is distinguished from the resizeTo() in that the former is relative and the latter absolute.

You must specify the resizable feature for all JavaScript-generated windows that you want to resize. If you don't, your windows will look about as dynamic as Ken Starr.

Window resizing gives Web builders much needed flexibility in Web application development. Imagine a search engine UI that opens in a pop-up window with only a small text field for inputting search terms. Users are given two additional features: Advanced and Search. Clicking Advanced automatically expands the window height revealing advanced query features. Clicking Search conducts the search and automatically expands the window width exposing a search hit list. All this is done from one location. Most search UIs are cumbersome and with each click take users farther and farther away from where they started. In our imagined pop-up search UI, users aren't taken anywhere; the main browser is never more than a click away.

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks

Free Newsletters, In your Inbox