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. Opening a New Popup Window Here is the syntax: Code: 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: 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. 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. 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. 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. HTML: <html> <head><title>Print</title> </head> <body> <form> <input type="button" value="Print" onClick="window.print()"> </form> </body> </html>
