A Smarter Way To Learn HTML & CSS(2015)

32
Opening a new window

No one ever wants to lose a user to another site, but sometimes we have to link away anyway. The tactic for encouraging the user not to leave permanently is to open the linked site in a new window, leaving your site in its existing window. This is how to do it.

Look it up at <a href="http://www.wikipedia.org" target="_blank">Wikipedia</a>.

When the user clicks the link text Wikipedia a new window opens for Wikipedia. The original page remains open in its own window.

Have you seen link text that says things like “Explain this” or “What is this”? When you click one of these links, a small window opens on top of the main window with a bit of useful information. Most of the main window still shows, so the user doesn’t get disoriented. She sees the little window as an addendum to the main window. Unfortunately, you can’t create one of these little informational windows in HTML. You need JavaScript. My book A Smarter Way to Learn JavaScript shows you how, step-by-step. But here’s some code that you can paste into your page if you’d like to create a small window without knowing JavaScript.

<p id="openWindow">Tell me a little more about this.</p>
<script>
document.getElementById("openWindow").onclick = openWindow;
function openWindow() {
var w = window.open("more-info.html", "", "width=200,height=300,left=300,top=400");
}
</script>

Adapt the script above to your needs by making these changes:

· Substitute your anchor for Tell me a little more about this.

· Substitute your HTML file name for more-info.html

· Substitute your preferred width and height for width=200,height=300. The numbers are pixels.

· Substitute your preferred window placement on the screen for left=300,top=400. The first number tells the browser how many pixels to inset the window from the left edge of the screen. The second number tells the browser how many pixels to drop the window from the top of the screen.

Don’t add or delete any spaces from the code. The spacing may look odd, but if you try to improve it in any of the wrong places, the window won’t open.

In your HTML file code a paragraph that includes a link to asmarterwaytolearn.com. Save the file and display it. Click the link.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-32-1.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/32.html