Working With Popup Windows in JavaScript

Discussion in 'JavaScript and AJAX' started by pradeep, Jun 25, 2012.

  1. pradeep

    pradeep Team Leader

    Joined:
    Apr 4, 2005
    Messages:
    1,645
    Likes Received:
    87
    Trophy Points:
    0
    Occupation:
    Programmer
    Location:
    Kolkata, India
    Home Page:
    http://blog.pradeep.net.in
    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>
    
     
  2. unni krishnan.r

    unni krishnan.r Member

    Joined:
    Apr 20, 2010
    Messages:
    209
    Likes Received:
    4
    Trophy Points:
    18
    Occupation:
    education
    Location:
    Kerala
    Home Page:
    http://blogofunni.blogspot.com

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice