spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

Developer News
Linux 2.6.26 Opens Up to Debugging
Borland Launches ALM Management Tools
Nominations Open for CEO Vision Awards
JavaScript Tip of the Week for January 6, 1997: The Universal Remote

The universal remote is a great invention, and now it's on the Web. It's a real improvement on the original remote, and it's much easier to use. So why is it called "universal"? There are actually a couple of reasons.

  • If the remote cannot find the window that launched it, it creates its own.
  • It's easier to use; less JavaScript in the remote itself.
  • To add a form, such as a search, just change the target. No more parsing together keywords and search dialog.
Lauching The Remote

To create a universal remote, you should begin by making a function to launch it. Put this function in the page that you want to launch the remote from.
    function makeRemote() {
    remote = window.open("","remotewin","width=350,height=400");
    remote.location.href = "http://webreference.com/javascript/970106/remote.html";
        if (remote.opener == null) remote.opener = window; 
    remote.opener.name = "opener";
    }
This code uses the opener's name property, which is accessible in HTML, to name the opener "opener" (sounds redundant, it isn't though). Because it names the opener through the name property, you can now use TARGET to redirect links and forms to the opener -- just as you do with frames. For example, a link in the remote, "remote.html", can now be redirected to the opener by simply putting a target inside the link. No additional functions are needed.
    <A TARGET = "opener" HREF = "index.html">
Naming the opener "opener" is just an HTML trick, don't get it confused with the JavaScript opener property that is used in most remotes. The opener property is a totally different animal, as was discussed in an earlier tip, and is only accessible through JavaScript.
A Search Is Just A Search

Something that you see in many remotes is a search feature. Adding a search feature, or almost any type of form, can be done quickly with the universal remote. Though you can preform a search (in a remote) by parsing together parts of the search "dialog" with a keyword, the method you will learn is easier and more adaptable. It works like this: instead of targeting the search to the current window, which is the remote itself, target the search to the opener window. Sounds pretty obvious, doesn't it. Other than that, the remote version of the search form can be identical to the original version.

Begin by placing your form in the remote as you would in any other scenario. There is only one thing that needs to be changed: the form's target. Since the opener is named "opener", make the form's target "opener". For this example, Webreference's search form is used.

    <FORM ACTION="/cgi-bin/AT-webrefsearch.cgi" TARGET = "opener" METHOD="POST">
    <INPUT NAME="search" size="37"><BR>
    <INPUT TYPE="submit" NAME="Search" VALUE="Search">
    by <INPUT TYPE="radio" NAME="mode" VALUE="concept" CHECKED>
    concept or <INPUT TYPE="radio" NAME="mode" VALUE="simple">
    keywords <INPUT TYPE="hidden" NAME="sp" VALUE="sp">
The form will now function in the remote as it does in any other page. The difference is that the results of the form (in this example the search results) will be displayed in the opener, not the remote. The great thing about this method is that it can be used easily with a wide range of forms, not just for searches. As a general rule, if a form uses POST or GET to retrieve its results you can assume that it will work with this remote by changing the TARGET of the form. If the form is JavaScript powered, like the select menu, you must go the traditional route and change it's references to windows (window.location becomes opener.location).

Finally, to launch the remote, you can use a link anywhere in the page:

    <A HREF = "javascript:makeRemote()">Start Remote</A>
or put the onLoad event handler in the BODY tag to display it automatically.
    <BODY onLoad = "makeRemote()">

Source



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
How to Create an Ajax Autocomplete Text Field: Part 10 · Adding Client Capabilities to Server Controls Using the ASP.NET AJAX Control Toolkit · JavaScript and HTML Tricks
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Palm's Treo Presses On (iPhone Who?) · Toshiba Extends Notebook Line with 5400 and 7200-RPM Drives · Epson Kicks Color Cost to the Curb