BACK

Playing with Windows (An Aside)!

My, aren't we having fun? Here's a review of what happened:

• We use our old HTML tricks to centre a button vertically and horizontally on the screen, whatever the screen resolution;

• If you move your mouse over the Alice-in-Wonderland style "drink me" cup, then the status bar encourages you to drink!

• If you move your mouse away, you're called a "Chicken".

• If you try and scroll down or page down in the window, the window scrolls inexorably back upwards!

• When you finally click on the button (or cup), a new window is opened. Apart from telling you how it was opened, the new window has two buttons.

• If you perversely click on the second ("not here") button, then the button does two things:
  1. It tells you the window name (Alice);
  2. It closes the window.

• If however you click on the inviting "Click me" button, you are told the name of the window who opened Alice, and also that Alice's name has changed. In addition, the button titles are altered - now when you click on the second button, you can see its purpose!

• See how the window we opened changes the background colour of this window.

• Back in our old window, the scrolling has stopped!

• If we AGAIN click on the button, it doesn't work, but renames itself to "Bye", and moves us down to this discussion!

Just in case you missed some of this, reload the page in your browser (usually by pressing Ctrl+R) and check it out again! (Go on, try it again)!

How did we do this?

1. We know how to centre something independent of screen size, so we won't discuss this here (read our HTML tutorial)!

2. We learnt in part 3 how to write to the status bar. The event we used to trigger this is "onMouseOver", and we similarly used "onMouseOut" to call you a chicken. (This is getting ahead of ourselves a bit, as we only discuss events in the next tutorial page, but wottehell, archie).

3. The scrolling is rather cute (and would be extremely irritating in a 'real' page). It will only work in JavaScript 1.1 and above, so we test for this using:

   Is this JavaScript 1.1 or above?

   var myver = parseInt(navigator.appVersion); //get version var whoami=navigator.userAgent.toLowerCase(); //use lower case name overJS1 = ( ( myver > 2 ) && ( (whoami.indexOf("msie") == -1) || (myver > 3) ) ); //check - is javascript version over 1.0 ?

   Most of this you've seen before - all we are really checking is whether the browser version is over version 2 (Netscape), or if it's MSIE, making sure the version is over version 3. (On later pages we'll find better ways of checking the JavaScript version). We then:

   Set UP scrolling!

   HITCOUNT=0; //initialise global count of button clicks. if (overJS1) { setInterval("MoveUp()",20); }; //force scrolling up every 20 ms IF javascript ver > 1.0 function MoveUp() { if (HITCOUNT == 0) { scrollBy(0,-5); //-5 means scroll UP five pixels }; }

   This is cute. We use the setInterval command (only available in JavaScript 1.1 and above) to repeatedly schedule an event every 20 milliseconds. And what is the event? None other than a function called MoveUp which scrolls up by five pixels every time (and zero pixels across). See how we've defined the global HITCOUNT. Once we click on our "Drink me" button, the scrolling will cease as we will increase HITCOUNT by one for every click! (Fine print: view the source to see how we should really use setInterval() and the function which terminates it, clearInterval(). We've over-simplified! setTimeout() and clearTimeout() are similar, but only schedule one event - there are no repeats.)

4. Opening the Alice window is explained in Alice's box, but here the code is again:

   Opening Alice

   window.name="Wonderland"; //rename CURRENT window! window.open //open the Alice window ( "alice.htm", "Alice", "width=480,height=250,status=yes,resizable=yes" );

   As an aside, see how we've renamed the current window to 'Wonderland'.

5. Here is the code for the left button in Alice:

   The left button (more or less)!

   <input type="button" value="Click me" onClick="alert('I was opened by ' + window.opener.name + '. My name was ' + window.name + ' but I have just changed it'); window.name='Ender'; window.document.forms[0].elements[1].value = 'Now Click Here!'; window.document.forms[0].elements[0].value=' '; "> <--Okay, we've cheated a bit -->

   We've spread out the code a bit to make it legible. You'd have to put it all together to make the input button actually work, or (INFINITELY PREFERABLE) turn the above into a function. We were naughty.

   What does this do? It's obviously all in the onClick event. When we click on the button,

   1. We say who opened us. This is not as trivial as it looks: window.opener gives us total access to the window that opened Alice!
   2. We then rename our current window from Alice to 'Ender' - this shows how we have access to properties of our own (Alice) window;
   3. We then do something even more special - we rename one of the buttons inside Ender (neé Alice) to "Now Click Here!";
   4. Finally, we rename our own button. See how the size of the button changes once we've renamed it, but only in Internet Explorer!

   An interesting demonstration of what we can do to window elements. But there's more to come..

6. We use a similar expanded view of the other button (Again, this is UGLY. Rather write a function)!

   The second button (also adulterated)

   <input type="button" value=" .. not here" onClick="window.opener.document.bgColor='#F0F0FF'; alert('My name is '+window.name+'..Goodbye'); window.close()" >

   Well, perhaps not quite as bad! When we click this button, 'all' we do is change the background colour of the Wonderland document, tell the user our new name, and close off the Alice window.

7. The fiddling with the button after we close things is trivial (view the source), and we won't dwell on it. (But note that we moved down the screen using:

   scrollTo(0,350);

   This is a bit clunky, as what we really should have done is use the window.screen.availHeight property to determine the actual screen height, and then moved down by this value. We chose not to, as window.screen is only available in JavaScript 1.2 and above. (We chose to avoid the extra testing).

A few thoughts

The window.open() method in detail

1. url
2. name
3. options
4. true/false (only if opening an existing window)

The first two are straightforward (leave the url as a null string if you don't want to open any particular HTML document or whatever; the name is just a name). The third is a bit more challenging. It has a plethora of options:

Can you think of any way that you could "ring fence" all the windows that you open so that you cannot leave or close the parent without closing its children windows?

window.open() in JavaScript version 1.2(+)

The following window features were added in JavaScript 1.2.

• "alwaysLowered" * Causes the window to move "below" all other windows on the screen, even when it is active.
• "alwaysRaised" * Causes the window to always appear "on top of" all other windows, even when some other window is active. (The exact function of this feature depends on the operating system. On a Macintosh, the window will remain above other browser windows, but may not be above windows in other applications.)
• "dependent" Creates a new window that isn't a child of the current window (by setting the value to "0" or "no").
• "hotkeys" Disables most hotkeys if the window has no menu bar (does not affect the Exit and Security hotkeys).
• "z-lock" * Specifies that the window does not rise above other windows when activated - it lurks in the background.
• "innerHeight" Specifies the height of the window's viewing area, in pixels.
• "innerWidth" Specifies the width of the window's viewing area, in pixels.
• "outerWidth" Specifies the width of the entire window, including borders, toolbar, etc. This feature takes precedence over "innerWidth"; if you set both, "innerWidth" will be ignored.
• "outerHeight" Specifies the height of the entire window, including borders, toolbar, and so forth. This feature takes precedence over "innerHeight"; if you set both, "innerHeight" will be ignored.
• "screenX" Specifies the distance in pixels from the left edge of your computer screen to the left edge of the window.
• "screenY" Specifies the distance in pixels from the top of your computer screen to the top of the window.

NOTE that if you omit all of the above, then all of them are included. To turn all off, specify just one feature as =no. Some can only be used in signed scripts (ie added security) - these are marked with * stars above. titlebar=no is also forbidden without special permission, and no window may be under 100x100 pixels in size, or wholly invisible!

opener

Finally