JavaScript Tip of the Week for May 20, 1996: All about Windows (no, not the OS) | 4 | WebReference

JavaScript Tip of the Week for May 20, 1996: All about Windows (no, not the OS) | 4

JavaScript Tip of the Weekfor May 20, 1996: Using remotes to help users navigate around a site

Note: There is a bug in Netscape 3.0 involving windows but this remote has been modified so that it will work without any problems.

You probably have seen it while searching Yahoo!, a little button that says "Yahoo! Remote". Then you click on it and a little window pops up, allowing you to search Yahoo!. Then you minimize the window, and when your done and need to search again you just restore it. It's always there for you. This little device is called a remote, just like on your TV. If you haven't used a remote you should give it a try right now by clicking on the button below.

Anyone can have a remote on his or her page. It can be used to jump around your site, or you can put links on a remote to other pages while allowing people to return easily to your page.

To create a remote for your site, you have to make a function that will create a window for the remote, and then you have to create an HTML document that will actually be the remote. Put this function in the head of your main page, or the page that you want to access the remote from:

var remote = null;
function remoteStart() {
    remote = window.open('', 'TheRemote',
                             'width=250,
                              height=425,
                              resizable=1');
    if (remote != null) {
        if (remote.opener == null) {
        remote.opener = self;
        }
    remote.location.href = 'http://www.yourdomain/remote.html';
    }
}


What this does is create a window named TheRemote with an HTML document named remote.html inside it. It also gives the main browser window a name, opener, so you can refer to it later on. The next step is creating the remote itself, in this case remote.html. Do this like you would any other page, except you must use absolute filenames for all your images (as discussed in how to make windows), and your links must call a function instead of the usual <HREF> tag. The function that you will need to make the remote work looks like this, and should be put in remote.html:
    function fetch(url) {
    opener.location = url;
    }
All the function fetch does is take a URL and tell the main browser window, opener, to go to that location. This is how the links in a remote are done; the remote window does not change, but the main window does. The link in a remote would look like this:
    <A HREF = "JavaScript:fetch('URL_here')">Link</A>

As you can see, the <HREF> tag runs the function fetch and sends it the URL you specified. Then the main browser window goes to that URL. Finally, to use that remote on your page, create a button like the one below that activates the remote:
    <FORM>
    <INPUT TYPE = "button" 
           VALUE = "Start Remote'"
           onClick = "remoteStart()">
    </FORM>
Or you could use an onLoad statement to display the remote as soon as the page loads.

Now say you wanted to use status bar messages. It's really quite simple, add these functions to remote.html:
    function message(txt){
    opener.status = txt;
    setTimeout("remove()",2500);
    }
    function remove(){
    opener.status="";
    }

And use this in the HREF tag to display your message:
    onMouseOver = "message('Here is the message.');return 
Notice the use of opener.status instead of the window.status; that just tells JavaScript to put the status bar message in the main browser window. If you wanted to have the messages appear in the remote's status bar, you would just use window instead of opener in the code above. You would also have to turn the window's status bar on. But you're not limited to just links. For example, you can run a function in the main browser through the remote. So if you were make a JavaScript based game, you could use a remote (or a frame) as a control panel.

Source