Sunday, August 30, 2009
You Get My Prime Time
Blog Entry #155
Clicking the new window's Section Two link loads the tutorial's second page into the opener window; clicking its Section Three link loads the tutorial's third page into the opener window. The "Section Two" page gives the following script for creating a remote control window:
function openindex( )
OpenWindow = window.open("", "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>");
self.name = "main";
As specified on the "Section Three" page, the script's openindex( ) function is triggered by the loading of the tutorial's first page:
<body bgcolor="ffffff" onload="openindex( );">
<!-- Some browsers will not act on a hex-code color value that is not prefixed with a hash mark (#). -->
The openindex( ) function kicks off with a window.open( ) command that pops up the remote control window and gives it the object reference OpenWindow. The command's strWindowFeatures string sets the width and height of the OpenWindow viewport to 150 pixels and 300 pixels, respectively. In addition, the strWindowFeatures string unnecessarily sets the toolbar and menubar chrome features to no (Mac users will still see a menu bar at the top of the screen) and it contains the strange scrollbars = scroll assignment that we saw in the "Remote Image" script and discussed in Blog Entry #150; the toolbar, scrollbars, and menubar features can all be subtracted from the strWindowFeatures string without incident.
The next six openindex( ) commands write the document contained by the OpenWindow window. The OpenWindow document head specifies an R.C. title for the OpenWindow title bar. The OpenWindow document body holds a Remote Control heading of sorts and, more importantly, Section One and Section Two hyperlinks that respectively target remote_control_2.html and remote_control_3.html documents to a window named main.
Following an unnecessary OpenWindow.document.close( ) command for closing the OpenWindow document, the last openindex( ) command 'completes the circle' by assigning the identifier main to the name property of the opener window, which is referenced using its self property.
In his introduction on the tutorial's first page, Joe says,
In the "HTML Inside the Remote Control Box" section of the tutorial's second page, Joe states,
In the "Placing the Script" section of the tutorial's third page, Joe alleges,
Do not place the script within the body commands. It won't run there.Not true.
OpenWindow.document presentation and related practical matters
Near the beginning of the "Section Two" page, Joe says,
In order to get the two windows to play with each other, I had to make a point of [coding] them together to begin with. So I did.Actually, there's no reason why the OpenWindow document couldn't be moved to an external file; you'd have to maintain two files in that case instead of one, but on the plus side the openee document would be easier to read.
Whether the openee document is coded internally or externally, it's a good idea to get rid of its deprecated elements/attributes:
(1) The Remote Control string is marked up with a
<font size='+1'> ... </font>element, which maps onto and can be replaced by a font-size:larger; CSS declaration; however, my own preference is to recast the Remote Control string, which as noted above is a heading for all practical purposes, as an h3 element, which presentationally will bold the string and give it a block-level rendering.
(2) The script seems to use two center elements to center the OpenWindow display: there's an outer center element lacking an end-tag* and a nested center element that does the actual centering. The nested center element can be replaced by a
<div style='text-align:center;'> ... </div>element; the outer center element start-tag should either be thrown out or, preferably, replaced with a body element start-tag.
(*As for the div element, both the start-tag and the end-tag of the center element are required - see the center element declaration in the HTML 4.01 Transitional DTD.)
(3) If you like the aqua background in Joe's remote control window, which is imparted via a bgcolor='#00ffff' body element attribute not present in the "Section Two" script, then add a
tag to the openee document.
Two last presentational points:
• The Remote Control string is split between two lines via a br element, which can of course be removed if you see no need for this effect.
• For his demo window, Joe separated the various document body strings, including the You can move this by grabbing the blue bar with your mouse string, with p elements, but in the "Section Two" script he forgot to put a <p> tag between the Remote Control string and the Section One link. Semantically, the document links are not really 'paragraphs'; you might prefer to remove the <p> tags and instead use a display:block; style to give the links a block-level rendering.
Upon following the Section One/Two and Section Two/Three links, Firefox and Opera maintain focus with the remote control window, as is desirable, but Safari and MSIE transfer focus to the opener window, which is then brought to the screen foreground and consequently obscures the remote control window - this problem can be solved by equipping each anchor element start-tag with an
onclick='window.setTimeout(\"window.focus( );\", 100);' /* for an internally coded remote control, or */
onclick="window.setTimeout('window.focus( );', 100);" /* for an externally coded remote control */
attribute, which will return focus to the remote control window and keep it on top of the opener window.
Strict validation and the target attribute
for (i = 0; i < document.links.length; i++) document.links[i].target = "main";
Just be sure to place or reference the above script statement after the anchor elements in the document body.
Other remote control possibilities
The use of anchor elements and the target attribute is perhaps the most basic way for a remote control window to load new files into an opener window, but it definitely isn't the only way. More generally, almost any set of renderable HTML elements - form controls, small images, non-anchor text strings, table cells, anything - can be combined with suitable event handlers that take the opener window to new 'locations' by assigning URLs to the location property of the opener window. For example, the openee document could contain a selection list whose options, when selected, change the opener document; try it out below: