spacer

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

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji