Remote Control JavaScript: Section Two

By Joe Burns

Section Two

     So here we go. I was actually surprised how simple this little deal was. Geting the window to pop up was fairly easy. See the Advanced Java Script tutorial for how it's done. The trick is getting the smaller remote control to affect the larger window.

     In order to get the two windows to play with each other, I had to make a point of getting them together to begin with. So I did. Here is the script I used to make all this happen:

<script language="JavaScript">

function openindex()
{"", "newwin", "height=300,width=150,toolbar=no,scrollbars="+scroll+",menubar=no");
OpenWindow.document.write("<CENTER><font size=+1>Remote<BR>Control</font>")
OpenWindow.document.write("<a href='remote_control_2.html' target='main'>Section One</a><p>")
OpenWindow.document.write("<a href='remote_control_3.html' target='main'>Section Two</a><p>")

The Script

     That script above will go inside the <HEAD> commands of the page you want to come up with the remote control "window". The script is little more than an HTML page. See all the HTML commands?
     The script does two things. It first creates a new little window that will act as your remote control. Look above. See the height=300 and width=150 commands above? That's the size of the remote control window. You can set it to whatever size you want. Change the numbers around if you want a longer than wide control box.

The HTML Inside the Remote Control Box

     The remainder of the script is a series of commads that write text to the little window. I just made a point of writing the text as HTML commads, thus it compiles like HTML. You can change the text to whatever you want. Just keep the format true. You cannot jump down one line. If you write longer lines than I have - you need to keep all the text on one line. In addition you cannot have any quote marks in your HTML. Just don't use them. If you do - they will throw an error.

The Links

     Now the trick that Andree Growney did, getting the little window to control the big one. See the line:

OpenWindow.document.write("<a href='remote_control_2.html' target='main'>Section One</a><p>")

     The link between the litle one and the big one is done with a simple target command, just like those outlined in the frame tutorial. I must have worked on that for a hour. She got it in less time than it took to ask the question.
     I have the link going to a page called remote_control_2.html. That's this page. Notice the second page is called remote_control_3.html. Let's go there now to wrap this puppy up. You'll need to come back here to copy the script, but for now, let's go on. Click on Section Three in the remote control box.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date