pop-up windows...

To "pop" a new window, use the window.open() command with below syntax:
window.open('page','windowname','attributes');
page: is the file you want to display on the new window eg. "news.html"
windowname: is any name you want to call the pop-up window.
This is handy if you later want to manipulate the window (close, print, etc,...).
It can be left empty (with '').
attributes: this is where you can tell the browser how to display the new window.
position : (coordinates of the top left corner)
eg. top=30,left=30,screenX=30,screenY=30
The top and left attributes are recognised by Internet Explorer while Netscape refers to the coordinates as screenX and screenY.
bar display : (whether the bars are visible or not)
eg. status=no, location=yes, toolbar=no, scrollbars=yes
dimension : (size of the new window)
eg. width=300,height=300

Example:
<script>
<!---
window.open('annoy.html', 'crazy', 'top=100, left=200, screenX=100, screenY=200, toolbar=no, location=no, scrollbars=yes, status=no, width=500, height=350');
//--->
</script>

 This script would display page "annoy.html" on a new window named "crazy" which is positioned at (200,200), with no toolbar, no location bar, no status bar but scrollbars are present.
run this example script

where can you put this window.open() command ?

  1. in the <SCRIPT> tag: the script will excute the window.open() as it is called.
    Below is the example of an HTML file that asks for a file name from the viewer. Once the viewer click the 'Pop It' button the script executes the function PopURL() which opens a new window (called 'newWin') and displays the input file on the window, after alerting the viewer of the file name.     <HTML>
    <HEAD>
    <SCRIPT>
    <!---
    function PopURL(url){
    alert("Do you want to open the file "+url+" ?");
    window.open(url, 'newWin', 'top=100, left=200, screenX=100, screenY=200, toolbar=no, location=no, scrollbars=yes, status=no, width=500, height=350');
    }
    //--->
    </script>
    </HEAD>
    <BODY>
    <FORM name="theForm">
    Type in the file you want to open, then click the "Pop It" button<BR><BR>
    <INPUT TYPE=TEXT VALUE="annoy.html" NAME="url">
    <INPUT TYPE=BUTTON VALUE="Pop It"
    onclick="PopURL(document.theForm.url.value)">
    </FORM>
    </BODY>
    </HTML>

    The above HTML and Javascript is shown below:
    Type in the file you want to open, then click the "Pop It" button

  2. as a link: Linked pages can be displayed in a new window using window.open(). This has the advantage of having the original window present in the background
    (kind of similar to the <a href="xyz.html" TARGET=_blank>)
    Example:
     <a href=# onclick="window.open('sales.html')">click here</a>

    Below is how this link would appear and behave:

    click here

    Note that since the attributes weren't included in the window.open, the pop-up now is at the top left corner, has all the usual bars and the size is randomised. It also doesn't have a name.


  3. as "onload": This is a neat way to pop another window when the original page is loaded.
     <BODY onload="window.open('greetings.html','popWin','toolbar=no,location=no,scrollbars=no')">

    You alreay saw this window popping up when you just got to this page.
    Remember? Click here to reload the page

You can open the new window with either:
window.open('location.html','Windowname','attributes'); or
WindowName = open('location.html','','attributes');

how to create dynamic pop-up ?

Once you already popped a new window you can fill it with an HTML page written "on the fly", in the original file.
This is achieved using famous document.write("statement") code.
Let's say you have a form that the user will fill out. When it is finished, you want the input data displayed in a new page to be printed.
This involves two processes:
The opener page This is the page with the form on it.
It contains all the codes that are needed to produce the
The dynamic page This page only exists in the virtual world while the browser is running. It cannot be saved but it can be printed.
run this example
show the source


Let's go through the source, one bit at a time...
scroll the source code as you step through...

This <BODY> code includes the form where the user is asked to fill out the form.
The inputs are collected and once the Print button is clicked, the function PopnPrint() is called.


The <SCRIPT> is kept in the <HEAD> section of the HTML file.
The moveTo and resizeTo commands maximise the page.
The PopnPrint function is created using the (){} syntax.
PopOne is to be opened in the new window
Once PopOne exists, the dynamic (secondary) page is written on it by the line
PopOne.document.write("something");
something can be anything, HTML tags,codes, texts, froms, etc,... even javascript!
Note that they must be in the double quotation signs when required (as text on source).
Pay attention to how the input data are retrieved.
With <SELECT> and RADIO and CHECKBOX, you must use loops to count and find the chosen values.

For a cool mad popping window galore see The Five Window Show more faq


MORE TO COME IN NEXT UPDATE
javascript - basic stuffs