web design 1 - wk12a - pop-up windows, frames

web design 1 - CGR C/062 - spring 2003
Philip van Allen - vanallen@artcenter.edu
room 133, thursday 1:00pm-4:00pm

week 12a - pop-up windows, frames

pop-up windows :

creating custom browser windows with JavaScript

Pop-up windows are used to display additional content in a new browser window rather than replacing the current page. The simplest way to make a pop-up window is to use the "_blank" target for a normal link in a page. But these windows are standard browser windows.

If you want to specify the dimensions of the window and control features such as scroll bar visibility, menu availability, toolbar visibility, and so on, then JavaScript is required to create the window. Dreamweaver includes a behavior called "Open Browser Window" to generate this JavaScript.

To have a link open a pop-up window:

Create and save the HTML page to be opened
Select the text or image in the page that will open the pop-up window
In the property inspector for the selected element, put the "#" character in the link box (or, insert a named anchor so the page doesn't scroll to the top - see the named anchor note below)
Open the Behaviors window
Make sure that Dreamweaver is configured for the right version of JavaScript by selecting the "+" pull down>Show Events For>4.0 and Later Browsers.
Using the "+" pull-down menu, select OPEN BROWSER WINDOW
In the resulting dialog, browse to the HTML file you want to display in the new window
Enter the width and height for the window
Select the desired browser window attributes. You should experiment with these checkboxes to see how they affect the display size, appearance, and features

Pop-Up Notes

onClick event: I've had the best luck with using the onClick event to make pop-ups. Other events seem to have trouble with placing the window in front of the current window, or showing a cursor change.
Window name: If your site has multiple links that open pop-ups, and you want them all to be in the same window, you must put the same name in the "Window Name:" field in each open browser window dialog.
Named Anchor: The "#" in the <A> tag will cause the launching window to scroll to the top of the page if you are positioned lower on the page. To avoid this, place a named anchor at the position of the pop-up link (INSERT>INVISIBLE TAGS>NAMED ANCHOR), and then make the link URL to that named anchor (e.g. "#popup" rather than a simple "#").
Consistent pop-up window size: If you are putting graphics that must fit exactly in a pop-up window, you may find that there are either 10 extra or 10 less pixels in the window than you expect. The fix is this:

Set the resize and scrollbars attribute settings to "no". The window scrollbars and resize handle are what browsers treat differently. If you don't specify what should happen, some broswers leave space for them even if they aren't showing, others don't. So rather than using the default setting, you can avoid any ambiguity and fix the problem with code like this, which explicitly says do not display the scrollbars and resize handle.

onClick="MM_openBrWindow('pop_up_example.html','popup', 'scrollbars=no,resizable=no,width=200,height=300')"

You can edit the HTML and insert in the "scrollbars=no,resizable=no," text, or, when you use the Dreamweaver Open Browser Window behavior, check the boxes for "Scrollbars as Needed" and "Resize Handles" in the Open Browser Window dialog. Then open up code view and change "yes" to "no" in the code: scrollbars=yes,resizable=yes --> scrollbars=no,resizable=no

forcing the pop-up :
to the front :

Sometimes, the user will try to open a pop-up, and it will seem as if it is not opening. In fact, the pop-up is already open, but hidden behind another browser window. The solution is to force the pop-up window to the front when the user clicks. This is accomplished by modifying JavaScript code to add the window.focus() method. You can modify the pop-up window JavaScript that Dreamweaver creates. Find the following code in the <HEAD> section of your web page:

// Standard Dreamweaver function
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}

Copy the below code and paste it into your HEAD section, completely replacing the above code.

// Modified function, with additions in BOLD
function MM_openBrWindow(theURL,winName,features) { //v2.0
   var newWindow = window.open(theURL,winName,features);
   newWindow.focus();
}

putting the window :
in a specific location :

If you want to position the new window in a specific location on the screen, you can modify the code further to look like the following. By adding the "left, top" features for Explorer, and "screenX, screenY" for Netscape, the window will be positioned to the coordinates you put in place of "300" in this example.

// Modified function with additions in BOLD
function MM_openBrWindow(theURL,winName,features) { //v2.0
   var win_position = ',left=300,top=200,screenX=300,screenY=200';
   var newWindow = window.open(theURL,winName,features+win_position);
   newWindow.focus();
}

Example of pop-up that uses the above code, and has an anchor to keep the window from scrolling up: pop-up window

top