ptg ▼ Task: Exercise 17.4: Nesting Framesets The next step in the process is to split the right frame area into two horizontal frames. You achieve this effect by placing a second <frameset> block inside the base <frame- set> block. When one <frameset> block is nested inside another, the nested block must replace one of the <frame> tags in the outside frameset. In this case, you’ll replace the line that loads the temporary dummy.html page (which doesn’t really exist). To split the right frame into two frame areas, you replace the dummy <frame> tag with an embedded <frameset> block. This embeds the new frameset inside the area defined for the <frame> tag it replaces. Inside the <frameset> tag for this new block, you need to define a rows attribute, as shown in the complete code: <!DOCTYPE html> <html> <head> <title>Why I’m Away</title> </head> <frameset cols=”125,*”> <! this loads the choices page into the left frame > <frame src=”choice.html”> <frameset rows=”60,*”> <! the frame for column 2 > <frame src=”away.html”> <! has been replaced > <frame src=”reason1.html”> <! with an embedded > </frameset> <! frameset block > </frameset> </html> The embedded rows frameset defines two rows, the first being 60% of the height of the embedded frame area and the second taking up all the remaining space in the embedded frame area. In addition, two <frame> tags are embedded inside the <frameset> block to define the contents of each column. The top frame loads away.html, and the bottom frame loads reason1.html. 516 LESSON 17: Working with Frames and Linked Windows When used inside an embedded frameset, any percentage sizes are based on a percentage of the total area of the embedded frame, not on a percentage of the total screen. Save the finished HTML document to your hard drive as frameset.html. Test it in your browser. NOTE ▲ Download from www.wowebook.com ptg Creating Complex Framesets 517 ▼ Task: Exercise 17.5: Using Named Frames and Hyperlinks If you were to load your frameset.html page into a frames-compatible browser at this stage, you would see a screen similar to the one shown in Figure 17.15. Some of the text sizes and spacing might differ slightly, but the general picture would be the same. Although it looks right, it doesn’t work right yet. If you click any of the hyperlinks in the left frame, the frames-compatible browser will attempt to load the contents of the file you select into the left frame. What you want it to do is to load each document into the larger right frame. Earlier in this lesson, you learned about the target attribute, which loads different pages into a different browser window. To make the frameset work the way it should, you need to use a slight variation on the target attribute. Instead of the target pointing to a new window, you want it to point to one of the frames in the current frameset. You can achieve this by first giving each frame in your frameset a frame name or win- dow name. To do so, include a name attribute inside the <frame> tag, which takes the fol- lowing form: <frame src=“document URL” name=“frame name”> Therefore, to assign a name to each of the frames in the frameset.html document, you add the name attribute to each of the <frame> tags. Your frameset page now looks like the following, with the additions indicated with the shaded background: <!DOCTYPE html> <html> <head> <title>Why I’m Away</title> </head> <frameset cols=”125,*”> <! this loads the choices page into the left frame > <frame src=”choice.html” name=”left”> <frameset rows=”60,*”> <! the frame for column 2 > <frame src=”away.html” name=”top”> <! has been replaced > <frame src=”reason1.html” name=”main”> <! with an embedded > </frameset> <! frameset block > </frameset> </html> This source code names the left frame “left”, the top-right frame “top”, and the bot- tom-right frame “main”. Next, resave the updated frameset.html file, and you’re just about finished with the example. 17 ▲ Download from www.wowebook.com ptg ▼ Task: Exercise 17.6: Linking Documents to Individual Frames After you’ve named the frames, you have to fix the links in the choice.html page so that they load the target pages in the main frame rather than the left frame. You might recall that the target attribute was used with the <a> tag to force a document to load into a specific window. You’ll use the same attribute to control into which frame a document is loaded. In this exercise, you want to load a page in the main (bottom-right) frame whenever you click a hyperlink in the left frame. Because you’ve already named the bottom-right frame “main”, all you need to do is add target=“main” to each tag in the choice.html document. The following snippet of HTML source code demonstrates how to make this change: <p><a href=“reason1.html” target=“main”>Reason 1</a></p> <p><a href=“reason2.html” target=“main”>Reason 2</a></p> <p><a href=“reason3.html” target=“main”>Reason 3</a></p> <p><a href=“reason4.html” target=“main”>Reason 4</a></p> <p><a href=“reason5.html” target=“main”>Reason 5</a></p> <p><a href=“reason6.html” target=“main”>Reason 6</a></p> Alternatively, you could use the <base target=“value”> tag because every tag in the choice.html document points to the same frame. In that case, you wouldn’t need to include target=“main” inside each <a> tag. Instead, place the following inside the <head> </head> block of the document: <base target=“main”> With all the changes and new documents created, you should now load frameset.html into your frames-compatible browser and view all your HTML reference documents by selecting from the choices in the left frame. 518 LESSON 17: Working with Frames and Linked Windows After you get all your links working properly, you might need to go back and adjust the size of the rows and columns as defined in the <frameset> tags to get the layout exactly right. Remember, the final appearance of a frameset is still determined by the size of the screen and the visitor’s operating system. TIP ▲ Download from www.wowebook.com ptg Creating Complex Framesets 519 ▼ Task: Exercise 17.7: Adding Your noframes Content Although you have a frameset that works perfectly now, there’s another feature you need to add to it. Remember, some people who visit your frames page won’t be using frames- compatible browsers. The following addition to the frameset page creates some content that they’ll see when they open the frameset. Once again, open the frameset.html page. At this point, your code looks like the fol- lowing: <!DOCTYPE html> <html> <head> <title>Why I’m Away</title> </head> <frameset cols=”125,*”> <!— this loads the choices page into the left frame —> <frame src=”choice.html” name=”left”> <frameset rows=”60,*”> <! the frame for column 2 > <frame src=”away.html” name=”top”> <! has been replaced > <frame src=”reason1.html” name=”main”> <! with an embedded > </frameset> <! frameset block > </frameset> </html> Immediately after the last </frameset> tag and before the final </html> tag, insert the following <noframes> </noframes> element and content: Input ▼ <noframes> <body> <h1>I’m Away from My Desk, because </h1> <ul> <li>Reason 1 - <a href=”reason1.html”>I forgot my lunch at home.</a></li> <li>Reason 2 - <a href=”reason2.html”>I’m flirting by the water cooler.</a></li> <li>Reason 3 - <a href=”reason3.html”>None of your business.</a></li> <li>Reason 4 - <a href=”reason4.html”>I’m out to lunch.</a></li> <li>Reason 5 - <a href=”reason5.html”>The boss just called me in his office.</a></li> <li>Reason 6 - <a href=”reason6.html”>I just got fired.</a></li> </ul> </body> </noframes> 17 , Download from www.wowebook.com ptg When a user who isn’t using a frames-compatible browser navigates to the frameset, she’ll see the page that’s similar to the one shown in Figure 17.16. 520 LESSON 17: Working with Frames and Linked Windows , Output . FIGURE 17.16 This page appears when users view the frameset with a browser that isn’t frames- compatible. ▲ Magic target Names Now that you’ve learned what the target attribute does in a frameset, you should know you can apply some special target names to a frameset. You can assign four special values to a target attribute, two of which (_blank and self) you’ve already encountered. Netscape called these values magic target names. They’re case-sensitive. If you enter a magic target name in anything other than lowercase, the link will attempt to display the document in a window with that name, creating a new window if necessary. Table 17.2 lists the magic target names and describes their use. TABLE 17.2 Magic target Names target Name Description target=“_blank” Forces the document referenced by the <a> tag to be loaded into a new unnamed window. target=“_self” Causes the document referenced by the <a> tag to be loaded into the window or frame that held the <a> tag. This can be useful if the <base> tag sets the target to another frame but a specific link needs to load in the current frame. target=“_parent” Forces the link to load into the <frameset> parent of the cur- rent document. If the current document has no parent, how- ever, target=“_self” will be used. target=“_top” Forces the link to load into the full web browser window, replac- ing the current <frameset> entirely. If the current document is already at the top, however, target=“_self” will be used. More often than not, when you create links to other sites on the Web, you don’t want them to open within your frameset. Adding target=“_top” to the link will prevent this from occurring. Download from www.wowebook.com ptg Inline Frames The main advantage of inline frames is that is that you can position them anywhere on a web page, just as you can other elements like images or Flash movies. You can incorpo- rate content from another page or even another site into a page in a seamless way through the use of inline frames. Inline frames, which are specified using the <iframe> tag, are commonly the means by which “widgets” offered by popular websites are incor- porated into other websites. For example, sites like Twitter and Facebook offer widgets that you can incorporate into your own site that are implemented using inline frames. Here’s a brief run-through of how to create floating frames. First, you define them using the <iframe> tag. Like images, these frames appear inline in the middle of the body of an HTML document (hence the i for inline). The <iframe> tag supports attributes like src, which contains the URL of the document to be displayed in the frame, and height and width, which control the size of the frame. Table 17.3 lists the attributes of the <iframe> element. TABLE 17.3 Key Attributes Attribute Description width Specifies the width, in pixels, of the floating frame that will hold the HTML document. height Specifies the height, in pixels, of the floating frame that will hold the HTML document. src Specifies the URL of the HTML document to be displayed in the frame. name Specifies the name of the frame for the purpose of linking and targeting. frameborder Indicates whether the frame should display a border. A value of 1 indicates the presence of a border, and a value of 0 indicates no border should be displayed. marginwidth Specifies the margin size for the left and right sides of the frame in pixels. marginheight Specifies the size of the top and bottom margins in pixels. noresize Indicates that the frame should not be resizable by the user (Internet Explorer extension). scrolling As with the <frame> tag, indicates whether the inline frame should include scrollbars. (This attribute can take the values yes, no, or auto; the default is auto.) vspace Specifies the height of the margin (Internet Explorer extension). hspace Specifies the width of the margin (Internet Explorer extension). Inline Frames 521 17 Download from www.wowebook.com ptg TABLE 17.3 Continued Attribute Description longdesc The URL for a page containing a long description of the contents of the iframe.align. As with the <img> tag, specifies the positioning of the frame with respect to the text line in which it occurs. Possible values include left, middle, right, top, and bottom, which is the default value. absbottom, absmiddle, baseline, and texttop are available as Internet Explorer extensions. Deprecated in favor of CSS. Because you know how to use both regular frames and inline images, using the <iframe> tag is fairly easy. The following code displays one way to use the Away from My Desk pages with a floating frame. In this example, you begin by creating a page with a red background. The links that the user clicks appear on a single line, centered above the iframe. For clarity, I’ve placed each of the links on a separate line of code. Following the links (which target the floating frame named “reason”), the code for the floating frame appears within a centered <div> element. As you can see in the HTML below, the floating frame will be centered on the page and will measure 450 pixels wide by 105 pixels high: Input ▼ <!DOCTYPE html> <html> <head> <title>I’m Away From My Desk</title> <style type=”text/css” media=”screen”> body { background-color: #ffcc99; } </style> </head> <body> <h1>I’m away from my desk because </h1> <p style=”text-align: center”> <a href=”reason1.html” target=”reason”>Reason 1</a> | <a href=”reason2.html” target=”reason”>Reason 2</a> | <a href=”reason3.html” target=”reason”>Reason 3</a> | <a href=”reason4.html” target=”reason”>Reason 4</a> | <a href=”reason5.html” target=”reason”>Reason 5</a> | <a href=”reason6.html” target=”reason”>Reason 6</a> </p> <div style=”margin: 0 auto; width: 450px;”> <iframe name=”reason” src=”reason1.html” style=”width: 450px; height: 105px”></iframe> </div> </body> </html> 522 LESSON 17: Working with Frames and Linked Windows Download from www.wowebook.com ptg Figure 17.17 shows the result. Opening Linked Windows with JavaScript 523 17 Output . FIGURE 17.17 An inline (or float- ing) frame. Opening Linked Windows with JavaScript Pop-up windows are used all over the Web. They are often used to display advertise- ments, but they can be used for all sorts of other things, as well, such as creating a sepa- rate window to show help text in an application or to display a larger version of a graph that’s embedded in a document. You’ve seen how you can use the target attribute to open a link in a new window, but that approach isn’t flexible. You can’t control the size of the window being displayed, nor which browser interface controls are displayed. Fortunately, with JavaScript you can take more control of the process of creating new windows. You’ve already learned that one of the objects supported by JavaScript is win- dow. It refers to the window that’s executing the script. To open a new window, you use the open method of the window object. Here’s a JavaScript function that opens a window: function popup(url) { mywindow = window.open(url, ‘name’, ‘height=200,width=400’); return false; } The function accepts the URL for the document to be displayed in the new window as an argument. It creates a new window using the window.open function, and assigns that new window to a variable named mywindow. (I explain why we assign the new window to a variable in a bit.) The three arguments to the function are the URL to be displayed in the window, the name for the window, and a list of settings for the window. In this case, I indicate that I want the window to be 400 pixels wide and 200 pixels tall. The name is important because if other links target a window with the same name, either via the window.open() function or the target attribute, they’ll appear in that window. Download from www.wowebook.com ptg At the end of the function, I return false. That’s necessary so that the event handler used to call the function is stopped. To illustrate what I mean, it’s necessary to explain how this function is called. Instead of using the target attribute in the <a> tag, the onclick handler is used, as follows: <a href=“whatever.html” target=”_blank” onclick=“popup(‘whatever.html’)”>Pop up</a> Ordinarily, when a user clicks the link, the browser calls the function and then goes right back to whatever it was doing before, navigating to the document specified in the href attribute. Returning false in the popup() function tells the browser not to continue what it was doing, so the new window is opened by the function, and the browser doesn’t fol- low the link. If a user who had JavaScript turned off visited the page, the link to what- ever.html would still open in a new window because I included the target attribute, too. In the preceding example, I specified the height and width settings for the new window. There are several more options available as well, which are listed in Table 17.4. TABLE 17.4 Settings for Pop-Up Windows Setting Purpose height Height of the window in pixels. width Width of the window in pixels. resizable Enable window resizing. scrollbars Display scrollbars. status Display the browser status bar. toolbar Display the browser toolbar. location Display the browser’s location bar. menubar Display the browser’s menu bar (Not applicable on Mac OS X.). left Left coordinate of the new window onscreen (in pixels). By default, pop-up windows are placed slightly to the right of the spawning window. top Top coordinate of the new window onscreen (in pixels). By default, pop-up windows are placed slightly below the top of the spawning window. When you specify the settings for a window, you must include them in a comma- separated list, with no spaces anywhere. For the settings that allow you to enable or disable a browser interface component, the valid values are on or off. Here’s a valid list of settings: status=off,toolbar=off,location=off,left=200,top=100,width=300,height=300 524 LESSON 17: Working with Frames and Linked Windows Download from www.wowebook.com ptg Here’s an invalid list of settings: status=off, toolbar=off, location=false, top=100 Including spaces (or carriage returns) anywhere in your list will cause problems. It’s also worth noting that when you provide settings for a new window, the browser automati- cally assumes a default of off for any on/off settings that you don’t include. So, you can leave out anything you want to turn off. Here’s a complete example that uses JavaScript to create a new window: <!DOCTYPE html> <html> <head> <title>Popup example</title> <script type=”text/javascript”> function popup(url) { var mywindow = window.open(url, ‘name’, ‘height=200,width=400’); return false; } </script> </head> <body> <h1>Popup Example</h1> <p> <a href=”popup.html” onclick=”popup(this.href)”>Launch popup</a> </p> </body> </html> When a user clicks the Launch popup link, a new 200x400 pixel window appears with the contents of popup.html. The unobtrusive approach is to skip the onclick attribute entirely and bind the popup() function to the link in your JavaScript code. First, change the link on the page to look like this: <a href=“popup.html” id=”launchpopup”>Launch popup</a> Then you should edit the <script> tag so that it looks like this: <script type=”text/javascript”> function popup(url) { var mywindow = window.open(url, ‘name’, ‘height=200,width=400’); return false; } window.onload = function () { var link = document.getElementById(“launchpopup”); link.onclick = function () { return popup(this.href); Opening Linked Windows with JavaScript 525 17 Download from www.wowebook.com . ▼ <noframes> <body> <h1>I’m Away from My Desk, because </h1> <ul> <li>Reason 1 - <a href=”reason1 .html >I forgot my lunch at home.</a></li> <li>Reason 2 - <a. www.wowebook.com ptg Figure 17 .17 shows the result. Opening Linked Windows with JavaScript 523 17 Output . FIGURE 17 .17 An inline (or float- ing) frame. Opening Linked Windows with JavaScript Pop-up windows. shown in Figure 17 .16 . 520 LESSON 17 : Working with Frames and Linked Windows , Output . FIGURE 17 .16 This page appears when users view the frameset with a browser that isn’t frames- compatible. ▲ Magic target