javascript

Centered or Non-Centered Popups at Your Disposal

Many times a Webmaster has need to build a simple client side popup window using Javascript.

Much time can be saved by wrapping this command in a custom function and deploying that in an external Javascript include page, never to be touched again. This technique allows a great deal of code reuse and is very easy to maintain or modify as well.

The Javascript Open Window Command

The minimum requirement for an open.window command in Javascript is simply the URL:

window.open('http://wikiwebpedia.com/')

Some switches (e.g. not covered here), apply only to either Internet Explorer or Netscape Navigator browsers. The attributes that apply to all browsers are:

  • resizable – Allow the new window to be resizable.
  • scrollbars – Display scrollbars.
  • toolbar – Display browser toolbar
  • location – Display the URL address box.
  • directories – Display the extra browser buttons.
  • status – Display the status bar.
  • menubar – Display the menu bar.
  • copyhistory – Copy URL browser history.

There are several other window switches that are limited to either only Internet Explorer or Netscape Navigator browsers alone. The switches available to both to both browsers.

It is best to include the additional switches however making this simple command a bit more robust in order to fill more needs:

window.open('http://wikiwebpedia.com/','WindowName',
'resizable=yes,scrollbars=yes,toolbar=no,location=no,directories=no,
status=no,menubar=no,copyhistory=no')

It is also legal to use an attibute of the a href tag: the target, as the new window name in order to direct window output there. Possible values are:

  • _blank – Loaded into a new window. This is default
  • _parent – Loaded into the parent frame
  • _self – Replaces the current page
  • _top – Replaces any framesets that is loaded

The Open Window Custom Functions

The Feature switches of the open.window command can be built programmatically with a custom function. A binary string of 0s and 1s designating ON or OFF or in this case, YES or NO:

function getFeatures(p)
{
//USE: getFeatures('10000000');
// Send 9 character string of 0 or 1 indicating no or yes respectively
// would indicate only resizable would be turned on
// switches set are in the following order:
// resizable,scrollbars,toolbar,location,directories,status,menubar,
//copyhistory
var features = ';
var s = ';
if(p[0]=="1")
{
s='resizable=yes,';
} else {
s='resizable=no,';
}
features = s;
if(p[1]=="1")
{
s='scrollbars=yes,';
} else {
s='scrollbars=no,';
}
features = features + s;
if(p[2]=="1")
{
s='toolbar=yes,';
} else {
s='toolbar=no,';
}
features = features + s;
if(p[3]=="1")
{
s='location=yes,';
} else {
s='location=no,';
}
features = features + s;
if(p[4]=="1")
{
s='directories=yes,';
} else {
s='directories=no,';
}
features = features + s;
if(p[5]=="1")
{
s='status=yes,';
} else {
s='status=no,';
}
features = features + s;
if(p[6]=="1")
{
s='menubar=yes,';
} else {
s='menubar=no,';
}
features = features + s;
if(p[7]=="1")
{
s='copyhistory=yes';
} else {
s='copyhistory=no';
}
features = features + s;
// in for testing
//for(i = 0; i < p.length; i++){
//document.write(" Element " + i + " = " + p[i]);
//alert(p[3]);
//}
// in for testing
//alert(features);
return features;
}

Wrapping the window.open command itself in a function allows the programmer to center it on the user’s screen:

function openCWin(url,name,w,h,f)
{
/*
USE: openCWin(url,name,w,h,'01000000');
*/
// default selections used
// if none are passed
if(f==')
{
f='11000110';
}
var p = f.split("");
var features = getFeatures(p);
var settings = ';
// both top,left and screenY,screenX are included
// to be both IE and Netscape compatible
if(screen.width){
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
}else{winl = 0;wint =0;}
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'screenY=' + wint + ',';
settings += 'left=' + winl + ',';
settings += 'screenX=' + winl + ',';
settings += features;
win = window.open(url,name,settings);
win.window.focus();
}

Finally if the programmer needs the ability to control the x,y positions rather than center it an additional function has been included:

function openWin(url,name,w,h,t,l,f)
{
/*
USE: openWin(url,name,w,h,t,l,'01000000');
*/
// default selections used
// if none are passed
if(f==')
{
f='11000110';
}
var p = f.split("");
var features = getFeatures(p);
var settings = 'height=' + h + ',';
// both top,left and screenY,screenX are included
// to be both IE and Netscape compatible
settings += 'width=' + w + ',';
settings += 'top=' + t + ',';
settings += 'screenY=' + t + ',';
settings += 'left=' + l + ',';
settings += 'screenX=' + l + ',';
settings += features;
win = window.open(url,name,settings);
win.window.focus();
}

The functions above the LEFT, TOP, screenX, and screenY parameters have been used to specify the coordinates of a new window. Internet Explorer supports LEFT and TOP, while Navigator uses screenX and screenY for the same purpose. Each browser ignores the other browsers set of features, so specifying all four switches eliminates the need to worry about cross browser compatibility.

All source code from this article is available for free download. Right-click and select Save-As to retrieve the external Javascript file. The external file may then be included in a program.

Using the techniques included in the external Javascript file may well eliminate the need to code another popup box. With small modifications the Javascript popup functions included can be made to fit most any client-side scenario.

Leave a Reply

Your email address will not be published.