↑
Main Page

Navigating and opening new windows

resizeTo(

) — resizes the browser window’s width to

and its height to

. Negative

numbers cannot be used.

For example:

//move the window right by 10 pixels and down by 20 pixels

window.moveBy(10, 20);

//resize the window to have a width of 150 and a height of 300

window.resizeTo(150, 300);

//resize the window to be 150 pixels wider, but leave the height alone

window.resizeBy(150, 0);

//move back to the upper-left corner of the screen (0,0)

window.moveTo(0, 0);

Suppose you went through all this trouble to change the size and position of a window, but you didn’t

keep track of the changes. Now you need to figure out where on the screen the window is located and

what its dimensions are. This is where a lack of standards causes problems.

Internet Explorer provides

window.screenLeft

and

window.screenTop

to determine the

position of the window, but doesn’t provide any way of determining the size of the actual win-

dow. The size of the viewport (that area where the HTML page is displayed), can be retrieved

by using

document.body.offsetWidth

and

document.body.offsetHeight

, although this

isn’t a standard either.

Mozilla provides

window.screenX

and

window.screenY

to determine the position of the win-

dow. It also provides

window.innerWidth

and

window.innerHeight

to determine the size of

the viewport, as well as

window.outerWidth

and

window.outerHeight

to determine the size

of the browser window itself.

Opera and Safari provide the same facilities as Mozilla.

So the question becomes one of understanding the browsers your users have.

Navigating and opening new windows

Using JavaScript, it is possible to navigate to URLs and open new browser windows using the

window.open()

method. This method accepts four arguments: the URL of the page to load in the new

window, the name of the new window (for targeting purposes), a string of features, and a Boolean value

indicating whether the loaded page should take the place of the currently loaded page. Typically, only

the first three arguments are used because the last one has an effect only when calling

window.open()

doesn’t open a new window.

Even though moving and resizing browser windows is a cool trick, it should be used

sparingly. Moving and resizing windows has a jarring effect on users and for this

reason is usually avoided in professional Web sites and Web applications.

140

Chapter 5

08_579088 ch05.qxd 3/28/05 11:37 AM Page 140