Home | Contact | Site Map | Feedback

Company Information | Products | Services | Support

Pop-up Windows

Sometimes you will want to have control over the size of the pop-up window, and even what features of the window will show up: Do you want the window to be resizable? Have scrollbars if necessary? You can control all this with JavaScript.

This is not a thorough explanation of JavaScript and the document object model, but this should explain enough so that you can create pop-up windows easily and comfortably!

Here is the code for a JavaScript pop-up window link:

If we take that code and substitute:

newWindowURL = pop_up_ex.htm (the URL of our pop-up window)
nameOfWindow = popup (more about this later)
width = 640 (pixels)
height = 400 (pixels)

This is what you get: Pop-up Window Link

Paste this code into your HTML and after reading the information below, you can change the code to suit your needs!

An explanation of the code:

The URL of the page to be loaded into the new window. This will only work for people who don't have JavaScript-enabled browsers.

onClick=" ... "
This tells the browser to do something when the link is clicked.

window.open( ... );
This is a JavaScript program function. It tells the browser to open a new window. The things that come inside the parenthesis must be in this order, separated by commas:

The URL of the page to be loaded into the new window.

The identifying "name" of the window (this only matters if you want to create a link to close the new window. If you don't the window to have a name, you can always call it '_blank').

'width= ... '
Window properties - also separated by commas. You may omit the ones you don't need. Our first example of a pop-up window only defined the width and height and nothing else.

width=xxx The width of the new window in pixels.

height=xxx The height of the new window in pixels.

menubar If you include this, the window's menu bar will display (File, Edit, etc.)

status If you include this, the window's status bar (at the bottom of the window) will display.

scrollbars If you include this, the window will have scrollbars if necessary.

resizable If you include this, the window may be resized by the user.

toolbar If you include this, the browser's toolbar will be displayed.

location If you include this, the text area where you can type in URLs will be displayed.

directories If you include this, Netscape's directories ("What's new," "What's cool," etc.) will be displayed.

return false;
This piece of code will keep you from loading the "newWindowURL" into the main window.

Try it! This should be all you need to make pop-up windows.

Making a link to close your pop-up window:

You may wish to create a link to close your pop-up window (our example has one). Here's the code:

This is where the "nameOfWindow" variable becomes important. When you are making your link to create a pop-up window, keep track of what you name the window. Then use that same name in your close-window-link.

An explanation of the code:

<A HREF="oldWindowURL" ...></A>
Put a link to your previous page here. This should not affect anything if the user has JavaScript turned on.

onClick=" ..."
Same as before.

Tells the browser to close the window named "nameOfWindow."

return false;
Same as before.

E-Commerce Web
This web template provides you the layout for an ecommerce store, but you will need to develop your own back-end database to actually have a store.

There are several e-commerce solutions which you may consider. Shopping carts we recommend are Pay Pal (a reputable online service) and Mals-E.
Creating your Site Structure
If your web site will mostly be an online store, you may want to redo the site navigation. Our suggestion is to create a page for each product category and make those "Child Pages Under Home." That way, all of your product categories will show up in the main navigation bar. (If you have many product categories, you may wish to change the properties on the horizontal bar.)
FrontPage Beginners Tip:
FP 2000 refers to "navigation bars," while FP 2002 refers to "link bars." 2002 link bars are much more flexible, while 2000 link bars depend on your navigation structure. To create a nav/link bar, go to Insert/Navigation Bar (2000) or Insert/ Link Bar (2002).
Your Text Here
Replace this content with your own.

[Home] [Up] [Company Information] [Products] [Services]