Go4Expert

Go4Expert (http://www.go4expert.com/)
-   JavaScript and AJAX (http://www.go4expert.com/articles/javascript-tutorials/)
-   -   Working With Popup Windows in JavaScript (http://www.go4expert.com/articles/popup-windows-javascript-t28625/)

pradeep 25Jun2012 18:53

Working With Popup Windows in JavaScript
 
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: 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>


unni krishnan.r 12Aug2012 10:59

Re: Working With Popup Windows in JavaScript
 
nice article


All times are GMT +5.5. The time now is 00:31.