xWindow - Child (Popup) Window Creation & Management

Summary

xWindow helps to maintain child (popup) windows, especially when you need multiple child windows and each window needs different features. You can then have different sets of links which will open in their own customized windows.

The window is opened the first time you call the object's load() method. When you call the object's load() method you pass it a url. If the window is not open it is opened with the parameters you initially preset when creating the xWindow object and the page at the url is then loaded into the window. If the window is already open then the page at the url is loaded into the window. The window is then focused (brought to the top).

xWindow will work in almost any Javascript-enabled browser including NN4. xWindow is part of the X library. The download package is available at Cross-Browser.com/Toys. This page documents xWindow as of X library version 3.15.3 in which enhancements were made to xWindow.

Javascript Usage

In the SCRIPT element of the page you create an xWindow object for each child window the page will need. The window is not opened upon creation of the object. The purpose for creating the object first is to preset the parameters that will be used later when the window is opened or re-opened.

Syntax

var winMax = new xWindow(
  'winMax',               // target name
  screen.width,           // width
  screen.height - m,      // height - m is a 'fudge-factor' ;-)
  0, 0,                   // position: left, top
  0,                      // location field
  0,                      // menubar
  1,                      // resizable
  1,                      // scrollbars
  0,                      // statusbar
  0);                     // toolbar

Object Prototype Arguments

If w is 0, win will have default width.
If h is 0, win will have default height.
If x < 0, win will have default left position.
If y < 0, win will have default top position.
Pass a 0 or 1 for the remaining arguments.

Object Methods

load(sUrl) - Load the page at sUrl into the window. If the window is not opened it will be opened with the preset features. The window is then focused (brought to the top).
close() - Close the window.
focus() - Focus the window (bring it to the top).
opened() - Return true if the window is open.

xWindow Source

function xWindow(name, w, h, x, y, loc, men, res, scr, sta, too)
{
  var e='',c=',',xf='left=',yf='top='; this.n = name;
  if (document.layers) {xf='screenX='; yf='screenY=';}
  this.f = (w?'width='+w+c:e)+(h?'height='+h+c:e)+(x>=0?xf+x+c:e)+
    (y>=0?yf+y+c:e)+'location='+loc+',menubar='+men+',resizable='+res+
    ',scrollbars='+scr+',status='+sta+',toolbar='+too;
  this.opened = function() {return this.w && !this.w.closed;};
  this.close = function() {if(this.opened()) this.w.close();};
  this.focus = function() {if(this.opened()) this.w.focus();};
  this.load = function(sUrl) {
    if (this.opened()) this.w.location.href = sUrl;
    else this.w = window.open(sUrl,this.n,this.f);
    this.focus();
    return false;
  };
}

HTML Usage

Proper <A> Element Usage

The value of the A element's target attribute and the first argument passed to the xWindow object should be the same. If javascript is disabled the link will open in the named window. If javascript is enabled the onclick handler will call the load() method which will load the page in the designated window then return false to cancel the default action of the A element.

<a target='winToys' href='pg.html'
  onclick="return winToys.load(this.href)">open in winToys</a>

Simple Listing

For a better example of actual usage view the source of this page.

<html>
<head>
<script>
var winToys = new xWindow(
  'winToys',              // target name
  screen.width-200, 200,  // size: width, height
  200, screen.height-200, // position: left, top
  0,                      // location field
  1,                      // menubar
  1,                      // resizable
  1,                      // scrollbars
  0,                      // statusbar
  0);                     // toolbar
</script>
</head>
<body>
<a target='winToys' href='pg.html'
  onclick="return winToys.load(this.href)">open in winToys</a>
</body>
</html>

xWindow Demo

Open in winToys

These links will open a page in winToys which will take the top half of the screen.

xPopup

xSelect

xToolTipGroups

Open in winTalk

These links will open a page in winTalk which will take the bottom half of the screen.

X Function Reference

X v/s CBE

Debugging Tips

Open "Maximized"

You can't specify the window to open in "maximized" mode, but you can do the next best thing:

Image Gallery

xCollapsible and xMenu5

dsds

Unobtrusive xWindow

xWinClass

What more could be done with xWindow? Let's apply the concept of unobtrusive DHTML. In the listing above you can see how we called the xWindow object's load method in the onclick attribute of an <A> element - directly in the HTML. So we have Javascript mixed in with our HTML. We would like to completely remove all behavior (Javascript) from the structural part of the page (the HTML) so that our <A> elements will look like this:

<a target='talkWin' class='clsTalkWin' href='pg1.html'>open in winTalk</a>
<a target='toysWin' class='clsToyswin' href='pg2.html'>open in winToys</a>

You'll notice that I've removed the onclick attribute. Now there is no Javascript in the HTML. This is separation of behavior and structure, and this must be done first.

You'll notice above that I have added a class attribute to each <A> element. This is how we will implement unobtrusive DHTML. Each xWindow object will be associated with a group of links via a CSS class name. All the links in a group will have the same class name. We will then use xGetElementsByClassName to get a list of all <A> elements with that class name. We can then add an onclick event listener to each element in the list. Javascript closures are used so we can let a method of xWinClass be used as the event listener.

xWinClass Source

function xWinClass(clsName, winName, w, h, x, y, loc, men, res, scr, sta, too)
{
  var thisObj = this;
  var e='',c=',',xf='left=',yf='top='; this.n = name;
  if (document.layers) {xf='screenX='; yf='screenY=';}
  this.f = (w?'width='+w+c:e)+(h?'height='+h+c:e)+(x>=0?xf+x+c:e)+
    (y>=0?yf+y+c:e)+'location='+loc+',menubar='+men+',resizable='+res+
    ',scrollbars='+scr+',status='+sta+',toolbar='+too;
  this.opened = function() {return this.w && !this.w.closed;};
  this.close = function() {if(this.opened()) this.w.close();};
  this.focus = function() {if(this.opened()) this.w.focus();};
  this.load = function(sUrl) {
    if (this.opened()) this.w.location.href = sUrl;
    else this.w = window.open(sUrl,this.n,this.f);
    this.focus();
    return false;
  };
  // Closures
  // this == <A> element reference, thisObj == xWinClass object reference
  function onClick() {thisObj.load(this.href);}
  // '*' works with any element, not just A
  xGetElementsByClassName(clsName, document, '*', bindOnClick);
  function bindOnClick(ele) {ele.onclick = onClick;}
}

xWinClass Demo

Open in toysWin

These links will open a page in toysWin which will take the left half of the screen.

xPopup

xSelect

xToolTipGroups

Open in talkWin

These links will open a page in talkWin which will take the right half of the screen.

X Function Reference

X v/s CBE

Debugging Tips

Minimal xWindow

xWinOpen

Unless you need all the extra features the two versions of xWindow above are really just over-kill and much larger than they need to be. The following is a minimal version. Hard-code the values you need into the features string - or delete those lines and remove the third argument to the window.open() call.

xWinOpen Source

var xChildWindow = null;
function xWinOpen(sUrl)
{
  var features = "left=0,top=0,width=600,height=500,location=0,menubar=0," +
    "resizable=1,scrollbars=1,status=0,toolbar=0";
  if (xChildWindow && !xChildWindow.closed) {xChildWindow.location.href = sUrl;}
  else {xChildWindow = window.open(sUrl, "myWinName", features);}
  xChildWindow.focus();
  return false;
}

xWinOpen Usage

<a target='myWinName' href='pg.html'
  onclick="xWinOpen(this.href);return false">open in popup</a>

Observations

The Maligned Popup

Users

Unfortunately popup windows have come to be associated with advertisements (I say 'unfortunate' because child windows do have appropriate uses). Many web surfers don't like ads ;-). To be fair, ads themselves are not the problem - it is the insane in your face implementations which have given ads such a bad rep.

Browsers

Today many browsers give the user control over popup windows. For example Opera allows me to control whether Javascript can open, resize or position windows. Obviously browser vendors have implemented these features in response to user requests. Advertisers and developers should consider that those user requests were a result of the rampant misuse of popup windows.

Advertisers

We're finally seeing the industry use a little logic. For example, appropriately placed text ads are becoming quite acceptable.

Developers

Please respect the visiters to your site. I have my browser window positioned and sized exactly like I want it - don't mess with it. If I click on a link that is going to open a popup window or resize my current window, please make sure I know what is about to happen before I click that link.

Cross-Browser.com