Multiple Windows...

FrontPage Index
Related Topics:
New Windows with HTML
New Windows with JavaScript

Coding Note

Sometimes lines of code can be very long! Where I have had to break a line of code to fit it on the page I have used the symbol to indicate that the line below is a continuation and that the code should be written as a single line

<Blah blah blah 
blah>

should be written:

<Blah blah blah blah>

Get Clever with Multiple Windows

For the web designer pop-up windows, or 'consoles', can be really useful. They allow the quick and easy presentation of information in response to the user's actions. Unfortunately they are mostly used for advertising and users often find them irritating. I have to admit to hating them myself! I usually close any unexpected pop-up window that appears before it has a chance to show its contents.

JavaScript gives a high degree of control over the size, position and appearance of these windows. With a little imagination and some JavaScript all sorts of interesting effects can be achieved. Here is an example.

When you click the link below the screen will fill with small windows, each with different content. The effect is designed to fit an 800x600 screen. The windows can be closed individually if required, but I have included a link on the first window to close them all. Click the link below to display the array of windows then click 'Close All Windows' on the first window to return to this page. Try it out...

Here's the first link

So, how was it done? Only a small amount of code was used on this page - sufficient only to open the first window...

<p>Here's the <span class="popup" onClick=javascript:window.open 
("groupwindow1.htm","one","toolbar=no,width=190,height=257, 
left=0,top=0")>first link</span>

The code is in the form of some inline JavaScript attached to the onClick event of the blue text. The code instructs the browser to open a new window 190x257 pixels, located in the top left of the screen at coordinates 0,0. The window has been given the name "one" so it can be referred to later, and it is to display the page "groupwindow1.htm".

All the clever stuff is done by the first new window when it opens. This window contains two JavaScript functions, located in the <head> section of the code, one called nextwindow() and the other closeall()...

<script language=javascript type="text/javascript">
<!-- Hide script from old browsers
function nextwindow() {
   two = window.open("groupwindow2.htm","two","toolbar=no,width=190, 
		height=257,left=200,top=0")
   three = window.open("groupwindow3.htm","three","toolbar=no,width=190, 
		height=257,left=400,top=0")
   four = window.open("groupwindow4.htm","four","toolbar=no,width=190, 
		height=257,left=600,top=0")
   five = window.open("groupwindow5.htm","five","toolbar=no,width=190, 
		height=257,left=0,top=286")
   six = window.open("groupwindow6.htm","six","toolbar=no,width=190, 
		height=257,left=200,top=286")
   seven = window.open("groupwindow7.htm","seven","toolbar=no,width=190, 
		height=257,left=400,top=286")
   eight = window.open("groupwindow8.htm","eight","toolbar=no,width=190, 
		height=257,left=600,top=286")
   }
function closeall() {
   eight.close()
   seven.close()
   six.close()
   five.close()
   four.close()
   three.close()
   two.close()
   window.close()
   }	
// End hiding script from old browsers -->
</script>

The function nextwindow() is called by the onLoad event of the window by attaching an instruction to the window's <body> tag...

<body onLoad="nextwindow()">

This causes the function to run as soon as the window opens. The nextwindow() function simply opens, sizes and positions the seven remaining windows and instructs each to display a different page. It also gives each a unique name ("two", "three" etc.) so that they can be referred to later.

Each window has a link to allow it to be closed. This isn't strictly necessary as they have all got the usual Windows close button it the top-right corner. But users are often confused by the absence of the familiar toolbars and menus, so a little extra help is appropriate. The code to close an individual window is...

<p align="center"><a href=javascript:window.close()>close this window</a></p>

The first window also has a link to close all the windows. This link calls the closeall() function...

<p align="center"><a href=javascript:closeall()>close all windows</a></p>

The windows are closed in reverse order. Note that the closeall() function refers to each separate window by name ("eight", "seven" etc.) but to its own window simply as "window".

I generally file this sort of thing under the heading Stupid Tricks but they can be fun, and even useful. Find out more about creating windows in the article Creating a New Window with JavaScript.

^ top

Hit Counter