home *** CD-ROM | disk | FTP | other *** search
/ MacHome 2001 June / MacHome Magazine Demo Disc June 2001.iso / Stuff / Software / Graphic / PageSpinner 3.0.2 / Examples / JavaScript / Remote_Control_Window < prev    next >
Encoding:
Text File  |  2000-10-16  |  5.7 KB  |  163 lines  |  [TEXT/JyWs]
  1. <HTML><HEAD>
  2. <TITLE>Remote Control Window</TITLE>
  3.  
  4. <SCRIPT LANGUAGE="JavaScript" type="text/javascript">
  5. <!--
  6. /*
  7.     Open Window
  8.     Written by Jerry Aman, Optima System, 1997-2000 
  9.  
  10.     Part of the PageSpinner distribution,     
  11.     http://www.optima-system.com/pagespinner/
  12.  
  13.     We will not be held responsible for any unwanted 
  14.     effects due to the usage of this script or any derivative.  
  15.     No warrantees for usability for any specific application are 
  16.     given or implied.
  17.  
  18.     You are free to use and modify this script,
  19.     if the credits above are given in the source code
  20. */
  21.  
  22. msgWindow = document;
  23.  
  24. function showWindow ()
  25. {
  26.     msgWindow = open("remote.html","displayWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=260,height=240"); 
  27.  
  28.     msgWindow = open("remote.html","displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=260,height=240");
  29. }
  30.  
  31.  
  32. function closeWindow ()
  33. {
  34.     if (msgWindow && msgWindow != document)
  35.     {
  36.         msgWindow.close();
  37.         msgWindow = document;
  38.     }
  39. }
  40.  
  41. // -->
  42. </SCRIPT>
  43.  
  44.  
  45. </HEAD>
  46.  
  47. <BODY BGCOLOR=FFFFFF TEXT=000000>
  48. <H1>Remote Control Window</H1>
  49.  
  50. <P><B>This page contains a JavaScript that open a new window with a specified size and contents</B></P>
  51.  
  52. <P>
  53. The JavaScript functions in this page lets  you open a file in a new window - you can also specify the size of the window and if the toolbar and other parts of the windows user interface should be displayed.</P>
  54.  
  55. <P>
  56. We use it to create a small remote control that will let you choose between some of the other JavaScript Examples included with PageSpinner. The source of the remote control page is in the <A HREF="remote.html">remote.html</A>.</P>
  57.  
  58. <P>
  59. Since the window size is specified in pixels, it is recommended to use a table with a preset size in pixels or images as the contents of the page. In our example we can't be sure that the full table will be visible in the window, so we choose to let the scrollbars be visible, but disables most other user-interface parts of the window.</P>
  60.  
  61. <HR>
  62. <P><B>Example:</B> </P>
  63. <P>
  64. <A HREF="javaScript:showWindow()" onMouseOver="window.status='Show Remote Control'; return true;'">Open Remote Control</A> | 
  65. <A HREF="javaScript:closeWindow()" onMouseOver="window.status='Hide Remote Control'; return true';">Close  Remote Control</A></P>
  66.  
  67. <HR>
  68. <FORM>
  69. <INPUT TYPE=BUTTON VALUE="Show Remote Control" onClick='showWindow(); return false'>
  70. <INPUT TYPE=BUTTON VALUE="Hide Remote Control" onClick='closeWindow(); return false'>
  71. </FORM> 
  72.  
  73. <HR>
  74. <BLOCKQUOTE>
  75. <P><B>How to use:</B></P>
  76.  
  77. <P>1) Copy the entire script section in the beginning of this document and place it inside the script section in your page.</P>
  78. <P>
  79. When we create a window, a window name is not required. But to be able to refer to the window by name from another window, we name the window "displayWindow". When referring to the window from this document, we can use the variable "msgWindow" to access the window directly though. This is the code that performs the work:</P>
  80.  
  81. <PRE>msgWindow = document;
  82.  
  83. function showWindow ()
  84. {
  85.     msgWindow = open("remote.html","displayWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=260,height=240"); 
  86.  
  87.     msgWindow = open("remote.html","displayWindow", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=260,height=240");
  88. }
  89.  
  90.  
  91. function closeWindow ()
  92. {
  93.     if (msgWindow != document)
  94.     {
  95.         msgWindow.close();
  96.         msgWindow = document;
  97.     }
  98. }
  99. </PRE>
  100.  
  101. <HR>
  102. <P>
  103. 2) Change the setting of the window options by editing the text, most options accepts the values <I>yes</I> or <I>no</I>. Please note that some browsers, like Navigator 2.0 and 3.0, will not use all specified options.</P>
  104.  
  105. <P>
  106. The following options and values can be specified when opening a new window:</P>
  107. <UL>
  108. <LI>toolbar[=yes|no]|[=1|0]
  109. <LI>location[=yes|no]|[=1|0]
  110. <LI>directories[=yes|no]|[=1|0]
  111. <LI>status[=yes|no]|[=1|0]
  112. <LI>menubar[=yes|no]|[=1|0]
  113. <LI>scrollbars[=yes|no]|[=1|0]
  114. <LI>resizable[=yes|no]|[=1|0]
  115. <LI>width=pixels
  116. <LI>height=pixels
  117. </UL>
  118.  
  119. <HR>
  120. <P>
  121. 3) Replace the filename, <CODE>"remote.html"</CODE>, with the name of the page that contains your remote control. You can of course put other contents in the window that is opened, e.g.,  a guided tour of your site, (see the <A HREF="../Miscellaneous Examples/Autoload.html">autoload</A> example) or you can use it as status window.</P>
  122.  
  123. <HR>
  124. <P>
  125. 4) Then use code similar to this to let the audience show or hide the window by clicking on a <B>link</B>:<BR></P>
  126.  
  127. <PRE><A HREF="javaScript:showWindow()" 
  128. onMouseOver="window.status='Show Remote Control'; return true";'>
  129. Open Remote Control</A> | 
  130.  
  131. <A HREF="javaScript:closeWindow()" 
  132. onMouseOver="window.status='Hide Remote Control'; return true";>
  133. Close  Remote Control</A>
  134. </PRE>
  135.  
  136. <P>
  137. Or use this code to let the audience show or hide the window by clicking on a <B>button</B>:</P>
  138.  
  139. <PRE>
  140. <FORM>
  141. <INPUT TYPE=BUTTON VALUE="Show Remote Control" 
  142. onClick='showWindow(); return false'>
  143.  
  144. <INPUT TYPE=BUTTON VALUE="Hide Remote Control" 
  145. onClick='closeWindow(); return false'>
  146. </FORM> 
  147. </PRE>
  148.  
  149. <HR>
  150. <FONT COLOR="#FF0000">JavaScript Bugs:</FONT>
  151. <BR>In the JavaScript function named <CODE>showWindow</CODE> the command
  152. <P>
  153. <CODE>msgWindow = open("remote.html","displayWindow"...</CODE>
  154. <P>
  155. is repeated twice. This is necessary to work around a bug in version 2.0.x of Navigator. If there only is a single <CODE>"window.open"</CODE> statement, the created window will be empty in Navigator 2.0.x. </P>
  156. <P>
  157. Also note that Navigator 2.0.1 and 3.0.1 always will display a size box regardless which value <CODE>resizable</CODE> is set to. Navigator 4.0.1 and Internet Explorer 3.01 handles the resizable setting correctly.</P>
  158.  
  159. </BLOCKQUOTE>
  160.  
  161. </BODY>
  162. </HTML>
  163.