Code reusable windows

Implementing code reusable windows not only lets Web builders reuse the same windowing function, but it also eliminates potentially numerous HTML files, which streamlines site management.

By Brent Lee Metcalfe

In this tip, I want to focus on a kind of reusable window. I wrote this code for an e-commerce site that's currently under development eMirage). Rather than forcing consumers to wait while all product photos download, I opted for placing the images in a pop-up window. The same window is used for both images and there are no separate HTML files. Here's how it's done:

var faux = null;
var pic = new Image();

function copyCat(pic) {
  faux ='','newWin','dependent,resizable,top=20,left=20,width=273,height=230');
  var fd = faux.document;;
  fd.write('<html><head><title>midnight @ the oasis</title></head>');
  fd.write('<body bgcolor="black" onLoad="window.focus()">');
  fd.write('<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">');
  fd.write('<tr><td align="center" valign="middle"><img src="' + 'graphics/' + pic + '.jpg"></td></tr>');

Function copyCat() both launches and writes the window. Variable pic, which is initially declared as an image object, is positioned in the HTML code and then passed as a parameter to copyCat(). This enables the function call to specify the graphic name. For instance, this is the invocation for our first Tip 20 example:

<a href="javascript:copyCat('sg005')"></a>

Writing to a window is occasionally daunting. Notice, for instance, that the subdirectory for variable pic had to be included as a separate string for the code to work:

fd.write('<tr><td align="center" valign="middle">
<img src="' + 'graphics/' + pic + '.jpg"></td></tr>');

Implementing this tip not only lets Web builders reuse the same windowing function (copyCat()) but also eliminates potentially numerous HTML files, streamlining site management.

Brent Lee Metcalfe is a Web architecture consultant.

Editor's Picks

Free Newsletters, In your Inbox