JavaScript: Tutorial - A Guide to JavaScript - Page 13

Window Position

This code demonstrates how to get the browser's left and top positions of the screen.

var winLeftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var winTopPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

This code demonstrates how to move the browser window.

//move the window to the top-left coordinate
window.moveTo(0,0);
//move the window down 50 pixels from the top-left
window.moveBy(0, 50);
//move the window to position 100x250 from the top-left
window.moveTo(100, 250);
//move the window left by 50 pixels from the top-left
window.moveBy(-50, 0);

Window Size

Determine the size of the browser window by using window.innerWidth, window.innerHeight, window.outerHeight and window.outerWidth.

This code will reliably detect the client window width and height.

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
	if (document.compatMode == "CSS1Compat"){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}

Resize the browser window usinng resizeTo() or resizeBy()

//resize to 150 x 150
window.resizeTo(150, 150);
//resize to 250 x 200
window.resizeBy(100, 50);
//resize to 200 x 200
window.resizeTo(300, 300);

Opening Windows

Use window.open() to open a new window using JavaScript. The following code will open a new window pointing to this website.

var prowaretech = window.open("http://www.prowaretech.com/", "_blank");
prowaretech.resizeTo(600, 400);
prowaretech.moveTo(0, 0);
prowaretech.close();

The Location Object

The location object provides information about the currently loaded document. It also provides general navigation functionality. location is a property of both the window and document objects.

To change the location, assign a website URI value to the href property.

To change the location without an entry being placed in the history stack use the replace() method.

The Navigator Object

The navigator object is usually used to determine the browser type that is running a web page.

Comment