| Whether you are channel-surfing or Web-surfing, a remote control can make the experience more convenient and comfortable. On the Web, a remote control is a small browser window with links that change the content in the main browser window. To set up a remote control (Figure 23.12), we will open a new browser window (see "Opening a New Browser Window" in Chapter 17) and place in it an HTML file with links that target the main browser window. Figure 23.12. The menu is fully extended and can be used to navigate the site. 
To create a remote control: 1. | index.html
Add the following code in the Web page(s) from which viewers will be able to open the remote control (Code 23.7). Steps 2 through 5 apply to this file.
Code 23.7. index.html:The openRemote() function can open an external window with a variety of sizes and uses.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Creating a Remote Control</title> <script type="text/javascript"> var remote = null; window.name = "content" function openRemote(contentURL, windowName, x, y) { widthHeight = 'height=' + y + ',width=' + x; remote = window.open(contentURL, windowName, widthHeight); remote.focus(); } </script> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, 'Times New Roman', times, serif; color: #000000; margin: 8px; background: white url(alice23.gif) no-repeat; } h1 { font:small-caps bold italic 2.5em Georgia, 'Times New Roman', times, serif; color: red; } h2 { color:#999; } .page { position: relative; top: 190px; left: 165px; width: 480px; } </style> </head> <body> <div > <h1>ALICE'S ADVENTURES IN WONDERLAND</h1> Lewis Carroll <h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2> <a href="remote.html" onclick= "openRemote(this.href,'remote',200,325); return false;">Open Remote Control </a></div> </body></html>
|
| | | 2. | var remote = null;
Initialize the variable remote to null to indicate that the remote is not open.
| 3. | window.name = "content"
To target content back to this window, the window has to have a name. In this example, the main window is called content.
| 4. | function openRemote(contentURL, windowName, x, y) {…}
Add openRemote() to the JavaScript.
This function first checks to see whether the remote is open. If it is, the window is given focus so that it pops to the top of the screen. If it isn't already open, this function opens a new browser window that is x wide by y tall. This window is called windowName. The page to load is contentURL.
| 5. | <a href="remote.html" onclick= "openRemote(this.href,'remote', 200, 325); return false;">
The function in Step 4 that opens the remote has to be triggered through an onclick handler on a link. The source file, window name, and dimensions of the new window need to be passed to the function.
| | | 6. | remote.html
Create the file that will be used in the remote control window (Code 23.8). Steps 7 through 10 apply to this file.
Code 23.8. remote.html: The controls change the content of the main window and also provide a link to close the remote window. | 7. | target="content"
All links in the control page should target the main window (content, in this example).
| 8. | onload="window.moveTo(100, 100);"
Add an onload event handler in the <body> element to move the new remote window to a specific position on the screen.
| | | 9. | onunload="if (opener) opener.remote = null;"
Add JavaScript to the onunload event handler in the <body> element to tell the originating window that the frame has closed by resetting the remote variable to null.
| 10. | onclick="self.close;"
Add a control that allows the visitor to manually close the remote.
|
 Tips
A remote control can contain anything you can put in an HTML document, but keep in mind that it has to fit into the dimensions you defined in the openRemote() function. Unlike a standard window, a remote window does not display menus, browser navigation (back and forward arrows), the current URL, or anything other than the basic border around the window. This border (called the chrome) does include the standard Close button in the top-right corner, so visitors can close the remote at any time. To open the remote, you have to run the openRemote() function. You can do this in several ways, such as having it open automatically when the main browser window opens (onload), although many browsers will block these "pop-ups." It is a good idea, therefore, to include a link that lets visitors reopen the remote if they close it, or to bring the remote to the front if it disappears behind another window.
|
