JavaScript is widely used for client side scripting ranging from simple effects to creating a rich UI like GMail. A significant operation with the client browser involves working with the browser window, like scrolling, resizing popup window, detecting window resize by the user, opening new window, closing a window etc.
In this article we'll look at the some operations which can be done with browser windows using JavaScript.
Here is the syntax:
The options may include the height & width of the new window, whether to show various toolbars like address bar, status bar etc. Follow the sample code below:
Closing a window is very straight forward, the window object has a method which does this for us.
You can resize windows programatically, in JavaScript there are two methods window.resizeBy(delta_w,delta_h) and window.resizeTo(w,h), the former resizes by a specified difference from the current size and the later just re-sizes to the absolute size provided. The following sample code will help you understand.
For scrolling windows programatically JavaScript offers two methods namely window.scroll(x,y) and window.scrollBy(x,y), the first one accepts the absolute positions (horizontal & vertical) of the positions to scroll to, and the second method will scroll by the specified amount from the current scroller position. See the sample code below.
You can programmatically invoke the browser's print function using the window.print() method. It'll open up the browser's print dialog.
In this article we'll look at the some operations which can be done with browser windows using JavaScript.
Opening a New Popup Window
Here is the syntax:
Code: JavaScript
window.open('<url>','<window_name>','<options>');
The options may include the height & width of the new window, whether to show various toolbars like address bar, status bar etc. Follow the sample code below:
Code: HTML
<html>
<head>
<script type="text/javascript">
function open_new_window() {
var new_window = window.open("http://www.go4expert.com","g4e_win","status=1,toolbar=0,location=0,menubar=0,height=200,width=300");
}
</script>
</head>
<body>
<form>
<input type="button" value="Open new window" onClick="open_new_window()">
</form>
</body>
</html>
Closing a Popup Window
Closing a window is very straight forward, the window object has a method which does this for us.
Code: HTML
<html>
<head>
<script type="text/javascript">
function close_window() {
if(window.confirm('Do you want to close this window?')) {
window.close();
}
}
</script>
</head>
<body>
<form>
<input type="button" value="Close this window" onClick="close_window()">
</form>
</body>
</html>
Resizing a Popup Window
You can resize windows programatically, in JavaScript there are two methods window.resizeBy(delta_w,delta_h) and window.resizeTo(w,h), the former resizes by a specified difference from the current size and the later just re-sizes to the absolute size provided. The following sample code will help you understand.
Code: HTML
<html>
<head>
<script type="text/javascript">
function resize_by() {
window.resizeBy(50,50);
}
function resize_to() {
window.resizeTo(100,400);
}
</script>
</head>
<body>
<form>
<input type="button" value="Resize by a 50x50" onClick="resize_by()"> <input type="button" value="Resize to 100x400" onClick="resize_to()">
</form>
</body>
</html>
Scrolling inside a Popup Window
For scrolling windows programatically JavaScript offers two methods namely window.scroll(x,y) and window.scrollBy(x,y), the first one accepts the absolute positions (horizontal & vertical) of the positions to scroll to, and the second method will scroll by the specified amount from the current scroller position. See the sample code below.
Code: HTML
<html>
<head>
<script type="text/javascript">
function scroll_by() {
window.scrollBy(0,5);
}
function scroll_to() {
window.scroll(0,40);
}
</script>
</head>
<body>
<form>
<input type="button" value="Scroll by a bit" onClick="scroll_by()"> <input type="button" value="Scroll to 0,40" onClick="scroll_to()">
</form>
<div id="dummy">
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
Scroll<br/><br/><br/><br/>
</div>
</body>
</html>
Print The Current Document
You can programmatically invoke the browser's print function using the window.print() method. It'll open up the browser's print dialog.
Code: HTML
<html>
<head><title>Print</title>
</head>
<body>
<form>
<input type="button" value="Print" onClick="window.print()">
</form>
</body>
</html>
