Javascript (browser windows continued)

Are we having fun yet? Well I hope so because the next script shows you how to create a scrolling window. Here is an example(getting tired of reading that as much as I am of typing it?):

<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
</HEAD>
<BODY>
<H3>Click on the link to see some different colored circles</H3>
<P><A HREF="javascript: newWindow(0)">See some circles!</A>

*******************************************************************

This is the code from the "circles.html" window:

<BODY>
<IMG SRC="C.GIF">
<IMG SRC="CR.GIF">
<IMG SRC="CG.GIF">
</BODY>

*******************************************************************

You see that we added the scrollbars command in the attributes section of circleWindow which allows you to,you guessed, be able to scroll. The seTimeout command tells the computer to create the window before the scrollbars, for obvious reasons, and it waits 1 second to do so. The code in the new window just initializes the images. Try this example:

Click on the link to see some different colored circles

See some circles!

The next thing we're going to cover will be on how to update one window from another. This can be used for copying the users information that they entered into your site into another window and showing it to them. Here is the script from the main page(only works with Internet Explorer):

<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">


</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<H1>Welcome to my website tutorial!</H1>
<FORM NAME="outputForm">
<INPUT TYPE=TEXT SIZE=20 NAME="msgLine" VALUE="">
</FORM>
</CENTER>
</BODY>

This script tells the browser to create a child window and sets it's paremeters. Then we created a small form to enter text into. NAME names the textfield and SIZE set the maximum characters to be entered to 20. Here is the script from the secondary window:

<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER>
<H1>What is your name?</H1>
<FORM>
<INPUT TYPE=TEXT onBlur="updateSecondary(this)" SIZE=20>
</FORM>
</CENTER>
</BODY>

In this script you create the updateSecondary function and create a variable called textField. OPENER lets the window reference back to the main window and get information. It also sends back the information with "Hello" and "!" attached to the text. Finally the OnBlur command tells the main window to stay in the background until the child window is closed. Here is the information I got from you earlier(unless you were using Netscape. I'm trying to find a solution, I promise!):

Welcome to my website tutorial!

If you would rather not have to write 2 HTML files, but want multiple windows, than do I have the answer for you! This next script will show you how to embed HTML within a script:

<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT
TYPE="TEXT/JAVASCRIPT">


</SCRIPT>
</HEAD>
</BODY BGCOLOR=WHITE>

Click here for a working example:

The newWindow line opens a new window and gives it parameters. The HTML within the Javascript uses Javascript to write the document using headers. The i=0 statement is starting a loop that begins with zero and let it increase until it reaches 99, since it's set to less than a hundred.

This next script will show you how to close a browser window by using javascript. This script will show you how to create a parent window and close it using a link:

<TITLE></TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<H1>Let's utilize our window making abilities!</H1>
<H3><A HREF="javascript:openWindow()">Open the new window</A>
<A HREF="javascript:closeWindow()">Close the new window</A></H3>
</CENTER>
</BODY>

Click here for an example:

The function openWindow should be familiar to you now and you create it first. Next create the closeWindow function. The if statement shows the new character && which is used to say, basically, "and". If both sides of the statement aren't true then it won't return a "true" result and allows for the window to be closed. The subsequent script creates the links.

The next script will show you how to position the window on the screen. It can get frustrating trying to move the child window around in order to see the underlying webpage, so javascript has an position attribute that allows you to set it's position. Here is the script:

Click here for a working example.

First we set leftPos equal to zero. Then we ask the browser if it understands the screen object. Using the -225 takes the regular size of your screen and subtracts 225 pixels. The final bit of code sets the attributes for the child window.