So you want to open Browser Windows?
Where you Want Them, How big You Want Them, and with What Browser Buttons You Choose...
After this lesson you will be able to:
Note: If you do not have the working documents from the previous lessons, download a copy now.
In lesson 25, we learned how to add a TARGET option to a hyperlink so that a mouse click would load the link in a new browser window. You may have noticed that this second window opens with the same web browser buttons and fields as the original window, and that it is usually the same size as that first window.
Why would we want to do this? If we are doing something like loading an image in a new web browser window, there is no real need for all of the browser buttons and fields, which take up valuable screen real estate. Furthermore, it allows us to create small web browser windows that can work like "tool palettes" in other computer programs.
How about trying it out?
<a href="URL" onClick="window.open('URL', 'window_name', 'window_options'); return false"> linking text</a>
The third parameter is where we list all the options that indicate how the window will appear. These items are all in one string of text enclosed in quotes:
You can list the first seven as OPTION=yes or OPTION=no to indicate that we want them to be used or not used in our newly opened window, separating each by a comma. For example:
I have provided a sneak peek of <A HREF="myimage.gif" onClick="window.open('myimage.gif', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no, width=300, height=200'); return false" >my image</a> for you to see.
will create a link to open an image file myimage.gif in window named "myWin", that shows no browser buttons, and is pretty much a fixed window size; you cannot resize it or scroll it.
On the other hand, we could link to a URL in a new window:
How about trying the best <A HREF="http://www.mcli.dist.maricopa.edu/tut/" onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/', 'myWin', 'toolbar=yes, directories=no, location=no, status=yes, menubar=no, resizable=yes, scrollbars=yes, width=500, height=400'); return false" >web page tutorial in the universe</a> for free!
This code provides the browser navigation buttons (but not the extra directory ones) and the URL display field. The window is opened at a window that is 500 pixels wide and 400 pixels high, and we allow the viewer to resize it and the window will have scrollbars activated.
You can write these options more compactly by just listing the ones that you wish to activate; the browser assumes the ones not mentioned are turned "off". For examples, here is the alternative way to write the two examples above:
I have provided a sneak peek of <A HREF="myimage.gif" onClick="window.open('myimage.gif', 'myWin', 'status, width=300, height=200'); return false">my image</a> for you to see. How about trying the best <A HREF="http://www.mcli.dist.maricopa.edu/tut/" onClick="window.open('http://www.mcli.dist.maricopa.edu/tut/', 'myWin', 'toolbar,status,resizable,scrollbars,width=500,height=400'); return false"> web page tutorial in the universe</a> for free!
Unfortunately, NetScape and Internet Explorer use different names for these options! So to make it work on both browsers, you must specify the settings twice:
Adding on to our earlier example, This code will tell 4.0 version web browsers to place the window 100 pixels over and 75 pixels down from the top left corner of the viewer's screen:
I have provided a sneak peek of <A HREF="myimage.gif" onClick="window.open('myimage.gif', 'myWin', 'status, width=300, height=200, screenX=100,screenY=75,left=100,top=75'); return false">my image</a> for you to see.
<head> <title>Volcanic Places in the USA</title>and
We then use the window.open function to create a window that is 600 wide by 400 pixels high; note that unlike our earlier examples, the first parameter for this function, the window URL, is empty. That's because the page that will fill the window does not exist. In fact, we will use the document.write function in the subsequent lines to write the entire contents for that page. By using the notation photoWin.document.write, we are telling the web browser to write the content to the new window using the template provided. Note that near the end, we let the browser know we are done by the code photoWin.document.close();
The last little bit is some special code that allows our function to tell NetScape browsers to bring this window in front of any other web browser windows (This function is not yet available to Internet Explorer browsers).
As it stands now, we only have built the functionality for our window opener. We will now create the code that "calls" the function:
<a href="../pictures/seismo.jpg" target="photo">with this new code:
<a href="'../pictures/seismo.jpg" onClick="show_photo('../pictures/seismo.jpg', 'Field Seismometer', 'Volcanic Tableland, Long Valley, California'); return false" onMouseOver="window.status='view a large image of a field seismometer'; return true">
We also use the onMouseOver event to control the display in the status bar when the user moves the mouse over this link (see lesson 27a)
When you click on either the postage stamp image of the seismometer or the hypertext link below it, a new web browser window should appear, and the larger picture is displayed in a black background page with yellow text (you may have to scroll down to see the caption). If it did not work, compare it to the sample web page for this part of this lesson.
<td valign=top>On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.html">detailed observations</a> on the mechanics of highly explosive eruptions. </td>to read:
<td valign=top>On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided detailed observations on the mechanics of highly explosive eruptions. The towering pine trees of this once-quiet mountain were <a href="../pictures/msh.gif" onClick="show_photo('../pictures/msh.gif', 'Trees Toppled', 'Mount St. Helens Blast Area'); return false" onMouseOver="window.status='view a photo showing the strength of the eruption'; return true"> toppled over like toothpicks</a>. </td>
<tr> <td> <font size=+1><B> San Francisco Peaks </B></font> </td> <td colspan=2> <font size=+1><B> MacDougal Crater </B></font> </td> </tr> <tr> <td valign=top>Scientists believe that the volcanic eruptions several million years ago that shaped <a href="../pictures/agassiz.jpg" onClick="show_photo('../pictures/agassiz.jpg', 'Mount Agassiz', 'San Francisco Peaks, Arizona'); return false" onMouseOver="window.status='view an image of a volcano in Arizona'; return true">this mountain in northern Arizona</a> were very similar to the ones observed at Mount St. Helens. </td> <td valign=top colspan=2> When hot volcanic magma encounters ground water, these explosive eruptions can form <a href="../pictures/macdougal.jpg" onClick="show_photo('../pictures/macdougal.jpg', 'MacDougal Crater', 'Pincate Volcanic region, Mexico'); return false" onMouseOver="window.status='view an image of a volcanic crater in Mexico'; return true">deep craters</a> seen just south of Arizona in the Pincate Volcanic region of Mexico. </td> </tr>
Listed below are places in the United States that are considered "active" volcanic areas.(remove the word "two")
Review topics for this lesson:
Use our custom window opener in your own web pages. See if you can update the format for the HTML that it writes dynamically.
What are some purposes you might want to use a small window that opens from your site? Can it be used like a Navigation control?
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
The 'net connection at MCLI is Alan Levine
Comments to firstname.lastname@example.org