Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

Open Window

Dreamweaver lets you take advantage of one of the most misused features of JavaScript, the pop-up window. Now you, too, can barrage your site visitors with endless ads and special offers! (Actually, this is how those annoying pop-ups are produced, but there are plenty of viable uses for them, too, particularly if you want to use multiple windows to navigate a site, register a user, or launch a game or movie.)

The basic procedure for opening a new window in JavaScript is pretty easy. Let's run through that quickly, and then we'll show you how to take advantage of some of the advanced features of the JavaScript command.

To make a window open when users click on an image:

  1. Create a new HTML page.

  2. Add an image to the page.

  3. Select the image.

  4. In the Behaviors panel, click the + (plus) button and select Open Browser Window from the drop-down menu.

    The Open Browser Window dialog box will appear (Figure 13.5).

    Figure 13.5Figure 13.5 The Open Window dialog box allows you to specify the size and style of the window.

  5. In the URL to Display text box, specify the file you want to open.

  6. Specify the size of the window in the height and width text boxes.

  7. In the Window Name text box, enter a name for the window. We'll ignore all the other options, but you can find out more about them in the Dreamweaver help files.

  8. Click OK to close the Window. The behavior will appear in the Behaviors panel.

  9. Click on the arrow to the left of the behavior name, and select onClick from the drop-down menu.

You can now preview the file in your browser, and a new window will pop up when you click on the image (Figure 13.6).

Figure 13.6Figure 13.6 Now you can pop open a new window-which might actually come in handy for things such as messaging windows, Flash movies, and registration gadgets.

One thing about this behavior is that the screen location of the pop-up window is based strictly on the location of the last window you opened in your browser. JavaScript allows you to specify the location of the window, but the Dreamweaver behavior doesn't have any way to do that.

Fortunately, we have figured out a way to specify the window location, and it's not hard at all.

To specify the location of a new window:

  1. In Code view, find the JavaScript code that calls the MM_openBRWindow function (Figure 13.7).

    Figure 13.7Figure 13.7 Now we get our hands dirty messing with the code manually!

  2. Right after the height=200 (or whatever height you specified) add the following ode:


    The top and left correspond to the number of pixels from the top and left of the screen, so expect some variation over different monitors.

    Make sure you add the code inside the single quotes, and also make sure you don't add any spaces anywhere. Your code should look something like:

    top=400 left=600,3')"

    That's all there is to it. You can now badger users on any part of the screen.

  • + Share This
  • 🔖 Save To Your Account