Pop-up Window
We all know that pop-up windows can be annoying, especially when they won't close, keep opening other windows, or come up without our asking for them to pop up. However, sometimes pop-up windows can be useful tools, such as when users might want a small bit of additional information when they don't want to leave the page they're on. Typically, pop-up windows have the same JavaScript code components, so once you make one, you can copy and paste that code to create other pop-up windows. Here is the code (that you would place in the body of your HTML document):
|
You can see how pop-up windows work by <a href="#" onclick="window.open('2basicHTML.html', 'basic', 'width=300,height=300,top=50,left=50,toolbar=0,status=0,scrollbars=0,resizable=0'); return false;">clicking here</a>.
|
The above lines of code will create the following display:
Here is a basic breakdown of what each part means:
- a—even though we want this page to remain the same, we are using a link to activate our pop-up window
- href="#"—making a link to "#" will tell the browser to keep this page in the main browser window
- onclick="[JavaScript function]"—the onclick function in JavaScript tells the browser to execute whatever JavaScript is in quotation marks when the user clicks on the link, despite the link to "#"
- window.open—opens another browser window
- ('URL', 'name', 'attributes')—the information in the parentheses is always listed in this order: the URL of the page you are opening, the name you want to label the new window, and the specific features that new window should have
- width—the width of the new window you want to open
- height—the height of the new window you want to open
- top—the location of the top edge of the new window you want to open
- left—the location of the left edge of the new window you want to open
- attributes—the following attributes are either on or off; as demonstrated in the code above (where all of the features are off), a "1" turns the feature on, and a "0" turns the feature off
- toolbar—determines whether or not you want the toolbar to appear in the new window
- status—determines whether or not you want the status bar to appear in the new window
- scrollbars—determines whether or not you want the scrollbars to appear in the new window
- resizable—determines whether or not you want users to be able to resize the new window
*Extra*
Once you have this pop-up window open, you can actually use links in that window to change the location of the main page (so, this mini-window could act as a sort of menu for your site). Create these links in the HTML code that loads into your pop-up window:
<h1>Assignments</h1>
<ul type="disc">
<li><a href="#" onclick="opener.location='corporateanalysis.html'; return false;">Corporate/Professional Website Analysis</a></li>
<li><a href="#" onclick="opener.location='unprofessionalanalysis.html'; return false;">"Unprofessional" Website Analysis</a></li>
<li><a href="#" onclick="opener.location='analysiscompilation.html'; return false;">Website Analysis Compilation</a></li>
<li><a href="#" onclick="opener.location='print2online.html'; return false;">Print to Online Conversion</a></li>
<li><a href="#" onclick="opener.location='tutorial.html'; return false;">Online Tutorial</a></li>
<li><a href="#" onclick="opener.location='clientwebsite.html'; return false;">Client Website</a></li>
</ul>
|
The above lines of code will create the following display:
|
Here is a pop-up menu for the class website: Assignments.
|
Basically, the opener.location means that this particular link should change the location of the page that opened this pop-up window, changing the URL to that in the single quotes ('page.html').
|
Writing for the World Wide Web
Planning Site Navigation