By: Al DiMarzio HB GraphicsGuilford, CT
Keeping a Web site's products and/or services in front of the customer during the decision making process is essential to making the sale or closing the deal. I am definitely not advocating we splash our Web pages with banners and images, but we can provide timely decision-making aids at critical locations on our pages. This article will discuss "child" Web pages, commonly known as pop-up windows, and how they can benefit both customer and client.
A Simplistic ApproachAt HB Graphics, we often use pop-up windows to display product details from the order form, instead of creating a "products" page that links to an order form. Many "shopping" cart scenarios force the customer to sift through page after page of images, forms and price sheets. By the time the customer is ready to make a decision they may have forgotten what they wanted or been sidetracked by other pages.
- Rules of Thumb
- And Now, on With the Code
- Using ColdFusion in a Pop-Up Window
- A Few Thoughts About Pop-Up Windows
- Practical Examples
Creating layers of information using pop-up windows allows the customer to remain focused while forming purchasing decisions. In some cases, we also allow the customer to calculate costs, including shipping, prior to completing the informational portion of the form. Implementation of these strategies is achieved by using JavaScript, ColdFusion, or a combination of both.
Having personally ordered many things on the Internet, I can readily identify Web sites that were based more on code design than on consumer ease-of-use. Making it simple for the customer has often given our design team mild headaches as the code can get pretty complex and increases design time. Compared to the potential for turned-off customers, that is a small one-time expense for the client. In my experience during the past 40 years, functional code is 20 percent and user interface code is the remaining 80 percent.
Let's get to the code first, and then we will cite a few Web sites you can check out.
Rules of ThumbFirst rule: Test your design on as many browsers and operating systems as you can. Netscape and IE all work differently, not to mention all the AOL and other custome derivatives.
The rest of the rules:
- Don't leave the "child" pop-up window open after the "parent" page closes.
- Allow the customer to close the pop-up window without using the window's X box.
- Allow the customer to print the pop-up window if it is information they might like to keep.
- If you open a second pop-up window, close the first one, and don't do a pop-up from a pop-up.
- Think about whether a pop-up window makes logical sense and contributes to the Web page.
Lastrule: Don't annoy the customer by popping up a window he or she didn't ask for unless it is an error message or will assist in what he or she is doing.
And Now, on With the CodeThere are three parts to the code issue:
- The "parent" page which initiates the pop-up window
- The JavaScript that creates the pop-up window
- The "child" pop-up window and its attendant functions
Let's start by discussing the parent page. (The JavaScript can be a part of this page or called from this page as a JavaScript file (.js). We leave it as an exercise for the student to decide where to place it.)
Regardless of where the script is located, the body tag of the parent page should contain the following code:
<body onUnload="closePopUpWindow()">
When the page closes, the "onUnload" event is triggered which then calls a JavaScript function (discussed below) that closes the pop-up window, so nothing is left behind.
To initiate the pop-up window, simply use an anchor tag, as shown below, which references the JavaScript function that opens the pop-up window:
<a href="#" onClick="selectPopUpWindow('something.htm')">Open Pop-up</a>
<!-- or the alternate form of coding -->
<a href="JavaScript:selectPopUpWindow('something.htm')">Open Pop-up</a>
The JavaScript is rather straight forward, taking care that each pop-up window created has the same name. Thus, as subsequent windows are opened, they replace the previous one. There is one hitch however. If the customer opens a pop-up window and then clicks on the parent window, depending upon placement, the pop-up window could be hidden by the parent window.
To solve this problem we can use the JavaScript window focus() method. An object has "focus" when it is active. Hence, as each subsequent pop-up window is created, we give the pop-up window focus forcing it to come to the front of the viewing area. This works fine with Netscape and IE, however with AOL browsers you must close each pop-up window before opening a new one. Note that in all three browsers you must check to see if a window is open before closing it. (The closePopUpWindow() function below shows the code).
In most cases we take a simple approach: Create the window and give it focus. Below is the JavaScript code for opening and closing a pop-up window.
--------------------- Begin Code Snippet ---------------------
/* Create a global variable for the pop-up window name so that it can be
referenced by other functions as/if needed. */
var windowName
/* We like to reuse code and often place our pop-up files in a separate folder.
Here we simply create a folder name variable */
var folderName ="popups"
/* Here is the function which creates the pop-up window */
function selectPopUpWindow(filename) {
/* The destination variable below is only used to concatenate the pop-up
folder name with the file name so the script knows where to look
for the files. The "filename" is passed as a parameter from within the
statement that calls the function.*/
var destination = folderName + "/" + filename;
/* To make sure the correct parameters are being passed I sometimes
use a JavaScript alert function to display information. I left this one
here to demonstrate its use and commented it out of the script. */
//alert(destination);
/* On the left side of the equation below we use a variable
to create the window. However, the name of the window
which appears as the second parameter in the open() method,
is required to identify the pop-up window for closing and
for passing data. Do not use spaces in this name or you will
get script errors.
The first attribute is the URL of the file to be opened in
the window. In the example below "destination" is already a
string value and there is no need to put it in quotes. However,
when placing a URL directly in the method, use quotes.
The third parameter is a string of attributes describing the Window.
Is it resizable? Does it have scrollbars? Where it is positioned,
and how big it is? These are only a few of the possible attributes. */
windowName = window.open(destination, "windowName", "resizable, scrollbars=yes, top=20,
left=20, width=375, height=350"); // (Keep this code on one line. Broken here for readibility)
/* In case the window is hidden we use the focus() method to bring it to the front. */
windowName.focus()
}
/* The close function, shown below, checks to see if there is a window name
and that the window is not already closed. If the window exists
and is open, then this function closes it. */
function closePopUpWindow() {
if (windowName && !windowName.closed) {
windowName.close();
}
}
--------------------- End Code Snippet ---------------------
As you can see, once you remove all the comments, the above code is pretty compact.
The pop-up window can simply be an HTML document or, more interestingly, a CFM document. In almost all cases we use pop-up windows to present selected information from a database of text and/or images. Simply pass the CF query information in the filename parameter that calls the window. (An example of this is included later in the article).
Regarding the pop-up window code, we like to make it easy for the viewer/customer to print and close the window. Here is some simple code you can place in the pop-up window HTML code to accomplish those actions.
--------------------- Begin Code Snippet --------------------- /* To print the window */ <a href="#" onClick="print()">Print Window</a> /* To close the window */ <a href="#" onClick="window.close()">Close Window</a> --------------------- End Code Snippet ---------------------Using ColdFusion in a Pop-Up Window
One of our greatest uses of pop-up windows is to show selected information from a client's database. You can simply pass the required query parameters in the URL string used in the open() method.
Here are a few code snippets on how the URL and Cold Fusion query action work together:
--------------------- Begin Code Snippet ---------------------
/* On the parent page we use a drop-down box that was created
from a query of a database. In the <select> tag of the drop-down
box we use the onChange event to call a JavaScript function
which opens the pop-up window.*/
<form name="filterappl">
Please Select a filter manufacturer from the list.<br>
<select name="manufacturer" onChange="selectManufacturer(this.form)" value="">
<option value="">(Please select manufacturer)</option>
<cfoutput query="manufacturers">
<option value="#Manufacturer_ID#"> #Company_mfg#</option>
</cfoutput>
</select>
</form>
/* In the JavaScript code of the parent page we have the window open() method
and the various parameters. Note that we gather the Manufacturer_ID from
the drop-down box select value and concatenate it into the URL
which calls the pop-up window. */
function selectManufacturer(form) {
var mfgr_ID = form.manufacturer.options[form.manufacturer.selectedIndex].value;
var destination = "spin-on_filters/manufacturers.cfm?mfgrID=" + mfgr_ID;
CMFilters = window.open(destination, "CM_Filters", "resizable, scrollbars=yes,
top=20, left=20, width=505, height=300");
CMFilters.focus();
}
/* In the pop-up window code we place the query which will
receive the mfgrID parameter and bring up the information
associated with that manufacturer. */
<cfquery name="crossref" datasource="abcdefg">
SELECT *
FROM Product_Crossreference
WHERE Manufacturer_ID = #mfgrID#
ORDER BY Mfg_Product_No
</cfquery>
/* The results of the query can be displayed in a table using the
appropriate <cfoutput query="crossref"> tag. */
--------------------- End Code Snippet ---------------------
A Few Thoughts About Pop-Up WindowsIn creating pop-up windows, I would suggest you encapsulate the content in a table, which we usually do for all our Web pages. However, in a pop-up window, when the "resize" attribute is specified in the JavaScript open() method, it creates a right side elevator bar that reduces the viewable area by 35 to 50 pixels. Thus, the "width" attribute of the open() method should be larger than the table width in the pop-up window.
As a matter of practice, we put the "print window" and "close window" methods at the top and bottom of the pop-up window for viewer convenience.
One last time: The purpose and content of a pop-up window should be to assist the customer/viewer in making a decision and support the content of the parent Web page. Use them moderately so as not to dilute their effectiveness.
Practical ExamplesOne can look at code all day, but a few working examples should tie things together. The above code snippets were taken from a site owned by CM Filters, which sells high quality oil and gas filters to automotive enthusiasts. Its product cross-reference sheets could boggle the mind. However, in a team effort of our designers and their marketing staff, we created a simple scheme of pop-up windows that present their products in a customer-friendly way. While you are there, why not order a superior oil or gas filter for your automobile?
Another example of using plain HTML to provide information can be found at The Guilford Savings Bank. However, the pop-up windows are part of the mortgage offerings on the residential loan page. Of course, while you are there, check out their loan and savings rates.
So there you have it: An HTML and a ColdFusion pop-up window demonstration. As stated earlier, the goal of a pop-up window, and in fact all Web pages, should be to assist the customer in finding information in a customer-friendly manner. Easy access to information keeps a positive focus on the decision making process that hopefully benefits those who own the Web site.
Keep your client's customers focused, and you will keep your clients.
About the AuthorFor additional information about the author, please select Author Biography.