Creating a Remote Control


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 &amp; 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.

[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 &amp; Ajax | Creating a Remote Control</title> <style type="text/css" media="screen"> body {      font-size: 1em;      font-family: Georgia, 'Times New Roman', times, serif;      color: #000000;      margin: 0px; } .menuOptions {      width: 100%;      font-size: 12px;      font-family: arial, Helvetica, sans-serif;      background-color: #ccc;      border: 1px solid #999; } .menuOptions a {      display: block;      text-decoration: none;      padding: 4px 4px;      color: red;      border-bottom: 2px solid white;      } .remote {      text-align: right;      font-weight: bold;      color: white;      background-color: #666;      padding-right: 8px;      cursor: pointer; } </style> </head> <body onload="window.moveTo(100,100);" onunload="if (opener) opener.remote = null;"> <div > <div  onclick="self.close;">Alice in Wonderland &otimes;</div> <a href="index.html" target="content" onfocus="if (this.blur) this.blur();">Introduction</ a> <a href="ch01.html"target="content" >Down The Rabbit-Hole</a><a href="ch02.html"target=  "content" >The Pool of Tears</a><a href="ch03.html"target="content" >A Caucus-Race and a  Long Tale</a><a href="ch04.html"target="content" >The Rabbit Sends in a Little Bill</a><a  href= "ch05.html"target="content" >Advice from a Caterpillar</a><a href="ch06.html"target=  "content" >Pig and Pepper</a><a href="ch07.html"target="content" >A Mad Tea-Party</a><a  href= "ch08.html"target="content" >The Queen's Croquet-Ground</a><a href="ch09.html"target=  "content" >The Mock Turtle's Story</a><a href="ch10.html"target="content" >The Lobster  Quadrille</a><a href="ch11.html"target="content" >Who Stole The Tarts?</a><a href= "ch12. html"target="content" >Alice's Evidence</a> </div> </body></html>

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.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net