WebTV Windows
<font color="#ff0000">WebTV JS and Frames "Bug"<br><br>Reload Page (cmd-r)</font>
A page of code displayed on a monitor of some kind is said to be within a Window. Other "windows" can be displayed on the same page or a completely different Window used in place of the one viewed. There are many types of "window", but all have one feature in common: no matter which type is used the page from which the "window" is generated is never left. This page summarizes various ways for creating "windows". In general, the discussion applies to both WebTV and PC. Far fewer attributes for any one "window" are allowed with WebTV than with PC, and only those attributes pertaining to both WebTV and PC are considered.

Text Fields  When using forms to accept input, the places which are to be filled in appear to be "little windows". However, they are not "windows" in the strictest sense. Rather, they should be called fields or, more correctly, text fields and come about by using certain HTML tags applying to a form. A single line text field arises when using an input-text tag, which is a stand-alone tag, while a multiple line text field is generated using a textarea tag, which requires a closing tag. These are then text fields and the code used to gain each are below them:

<form>
<input type="text" size=25>
</form>
<form>
<textarea
cols=25 rows=3>
</textarea>
</form>


Parent and Child Windows  A page that serves as the backdrop for or origin of other windows for display is termed a parent Window. A capital "W" is used if the Window displays a page called by URL, while a lower-case "w" is used if the window shown is generated by codes that are a part of the code for parent Window page. The page being viewed now is the parent Window for all others that will be illustrated. As an initial example, the use of embed or i-frame tags creates a child Window on this page. Display of other pages within such a Window is done by a URL link. An i-frame child Window is shown below. Pages that can be called into it are either the initial blank page or some other page.




The code for this particular i-frame is shown below:

<iframe width=300 height=200 src="blank.html" name="ifr"></iframe><br><table><tr><td width=50 align=center><form action="blank.html" target="ifr"><input type="submit" value="Blank" text="#000080" style="color:#000080"></form></td><td width=100 align=center><form action="wnd1.html" target="ifr"><input type="submit" value="Call Page" text="#000080" style="color:#000080"></form></td></tr></table>


Note: Two text color attributes are in the <input> tag so that the text color will be displayed on the button whether this page is viewed on WebTV or a PC.

With frames the frameset page creates the parent Window. All other Windows within this one are children of the frameset Window. For example, the frameset page whose code is given below is the parent Window for three child Windows: the navigation sidebar Window, an upper-right Window, and a lower-right Window. How these Windows are linked depends on the particular effect desired. One possible way is provided by this illustration. For additional information on coding, consult WebTV i-Frames & Frames.

<html>
<frameset cols="25%,*">
<frame src="navig.html" name="nav" scrolling=no>
<frameset rows="50%,*">
<frame src="frmp1.html" name="blk">
<frame src="frmp3.html" name="grn">
</frameset>
</frameset>
</html>




JavaScript may also be used to create a Window. However, the effect seen on WebTV depends on whether the viewer has a pre- or post-version 5.0 build. The effect on PC is completely different from these.

A JavaScript Window is opened using the command window.open(). The code below calls a page whose URL is "URLpage.html" into the Window created:

<script>function nwwndw(){opn=window.open('URLpage.html','NAMEpage','width=?, height=?');}function clwndw(){opn.close();}</script>


Click on the "New Window" button, above. If a centered message appears on a blue page that fills the screen, the pre-5.0 WebTV browser build is being used. Hit "Back" to return to this page. On the other hand, if a blue screen appears with white to either side and the "Window" looks more like an iframe, it will be located below the cumpulsory banner at the bottom of this page. This signifies a post-5.0 WebTV browser version. Scroll back up the page to the buttons and click "Close It". Upon doing so, the "Window" at the bottom of the this page will no longer be there. Scroll back down to see. In contrast, with a PC, the Window appears as a pop-up.

Windows "On-the-Fly"  Each of the Windows described above contained content provided on separate pages each having a URL. However, there is another kind of window (note the lower-case "w"). This is the kind where a complete page has its code within that of the parent page and which is executed as needed, i.e., "on-the-fly".

With JavaScript a long sequence of characters can constitute a variable. These are called character strings or simply just strings. An entire page can have its code represented by such a string. As when using Page Builder, no uncoded line breaks are allowed, each character being written uninterruptedly and wrapping under control of the browser. For example, the string shown below, in between single quotes, is set as the variable "apage":

var apage='<html><body bgcolor="#00ff00" text="#00ffff"><center><b>An "On-the-fly" Page</b><br><br></center></body></html>'


Now, in place of calling a page with a particular URL into a window for display, pass this variable to the window to show a page "custom made" just for this document.

One way to pass the variable to a window is to use the document.open(), document.close() construct. These are like HTML tags in the sense that the beginning one says "start here" and the last one means "end here". They essentially open a space, call it a window, within a document on which to place whatever may be desired. The full code for this is shown below and can have the effect shown by clicking the button. Key in "Back" to return.

<script>var apage='<html><body bgcolor="#006400" text="#ffffff"><center><font size=6><b>An "On-the-fly" Page</b></font></center></body></html>';document.open();document.write(apage); document.close();</script>


(you will be taken back 2 pages when you click your Back key after clicking this button)
This is an example of a window. It is not a true Window: it does not have a URL of its own; it can have a name, but not a URL (its URL is that for the page on which the window is displayed - this one).

A window.open() and window.close() construct may also be used. Here where a page URL would be empty quotes are entered instead. This is what takes place for the code shown below: The command "window.open()" enables a screen separate from the one being viewed to be displayed. This screen is given the name "page". The command "page.document.write()" designates that what is written between the parentheses is to appear in the window named "page". The command "page.document.close()" identifies the terminus of the page code. The final command "page.close()", which could also be given as "page.window.close()", returns view to the parent page.

<script>function newPage(){page=window.open("",'anewpage','width=300,height=120');page.document.write('<html><body bgcolor="#006400" text="#ffffff"><center><font size=6><b>An "On-the-fly" Page</b></font></center></body></html>');page.document.close();}
function clsPage(){page.close()}</script>
 


The way this window is displayed will, as before, depend on the WebTV browser build being used and will create a pop-up on PC.This "Close" button only works for pc`s.

DHTML may also be used to create a window "on-the-fly". The content of the window is placed between <div> and </div> tags in the body of the parent document at the location where the window is to appear. Each pair of div tags is identified by name:

<div id="over"><table width=300 height=200 border=1><tr><td align=center> <font size=5>Another
"On-the Fly" Window</font></td></tr></table></div>


The characteristics of the window are given in between <style> and </style> tags, usually placed in the head section of the parent document:

<style type="text/CSS">
#over{position:relative;top:15;left:250;width:300;height:200;background-color:cyan;color:#000000;visibility:hidden}
</style>


The name for the page content is prefixed by a pound sign, #. Between curly braces after the name are specifications for the window, each one being separated by a semicolon. The specifications in this instance are:
  • position-where to originate measurement to position the window; from the upper-left part of the parent document, an absolute point of reference, or from the upper-left of the line displayed just before the <div> tag, a relative point of reference.
  • top and left-measurement is made in pixels from the point of reference going from the top down and from left to right.
  • width and height-these are the dimensions for the window.
  • background-color and color-these give the background and text colors for what appears in the window.
  • visibility-the window is either not displayed, "hidden", or displayed, "visible".
This DHTML window is illustrated below:

Another
"On-the-Fly" Window


The DHTML window is made visible or is hidden either by the use of anchor tags, e.g.,

<a href="javascript:void(0)" onClick="document.all.over.style.visibility='visible'">Show</a>


or by the use of form buttons, e.g.,

<form><input type="button" value="Close" text="#000080" style="color:#000080" onClick="document.all.over.style.visibility='hidden'"></form>


Note: The window name appears between "all" and "style" in the onClick statement.

There are other DHTML windows which create some very intereresting effects. The one shown, as well as all other non-DHTML windows on this page, is compatible for both WebTV and PC.