Lab 4: Utilize a form to allow a user to define the size and start position of a new window, then create the window when the user hits the submit button.

Part 1: Works in Internet Explorer
Window width
Window height
Horisontal position:
Vertical position:


Part 2: Works in Netscape and Internet Explorer

Width:
Height:
Horisontal position:
Vertical position:

Back

Source: 

<head>

<script language="javascript" type="text/javascript">
<!--   
 function newWindow(){  
   horisontal = document.pictureForm.hori.value;
   vertical = document.pictureForm.vert.value;
   moveLeft = Number(document.pictureForm.posHori.value)
   moveDown = Number(document.pictureForm.posVert.value)
  
  if (moveLeft !== 0){
   placeHorisontal = screen.width-horisontal
   }
  else{
   placeHorisontal = 0
   }
  if (moveDown !== 0){
   placeVertical = screen.height-vertical
   }   
  else{
   placeVertical = 0
   }
  window.open('lesson_5/lesson_5.jpg', 'fishWin', 'width='+horisontal+',height='+vertical+',screenX='+placeHorisontal+',screenY='+placeVertical+',left='+placeHorisontal+',top='+placeVertical+',scrollbars=yes,resizable=yes,toolbar=no') 
  }
 
 function newestWindow(){  
    horisontal = Number(document.pictureFormTwo.hori.value)
    vertical = Number(document.pictureFormTwo.vert.value)
    moveLeft = Number(document.pictureFormTwo.posHori.value)
    moveDown = Number(document.pictureFormTwo.posVert.value)
    
  if (screen){
     placeHorisontal = screen.width-moveLeft
     placeVertical = screen.height-moveDown
     }
  window.open('lesson_5/lesson_5.jpg', 'fishWin', 'width='+horisontal+',height='+vertical+',screenX='+placeHorisontal+',screenY='+placeVertical+',left='+placeHorisontal+',top='+placeVertical+',scrollbars=yes,resizable=yes,toolbar=no') 
  }
//-->  
</script>

</head>

<body>

The first form 

    <form name="pictureForm" onsubmit="newWindow()" id="pictureForm">
     <table rules="none" frame="box">
      <tr>
       <td>
        Window width
       </td>
       <td>
        <input size="4" value="370" name="hori">
       </td>
      </tr>
      <tr>
       <td>
        Window height
       </td>
       <td>
        <input size="4" value="265" name="vert">
       </td>
      </tr>
      <tr>
       <td>
        Horisontal position:
       </td>
       <td>
        <select name="posHori">
         <option value="0" selected>
          Left
         </option>
         <option value="pRight">
          Right
         </option>
        </select>
       </td>
      </tr>
      <tr>
       <td>
        Vertical position:
       </td>
       <td>
        <select name="posVert">
         <option value="0" selected>
          Top
         </option>
         <option value="pBottom">
          Bottom
         </option>
        </select>
       </td>
      </tr>
      <tr>
       <td rowspan="2">
        <input type="submit" value="Submit">
       </td>
      </tr>
     </table>
    </form>

The second form 

<form name="pictureFormTwo" onsubmit="newestWindow()" id="pictureFormTwo">
     <table rules="none" frame="box">
      <tr>
       <td>
        Width:
       </td>
       <td>
        <input type="text" name="hori" value="368" size="4">
       </td>
      </tr>
      <tr>
       <td>
        Height:
       </td>
       <td>
        <input type="text" name="vert" value="255" size="4">
       </td>
      </tr>
      <tr>
       <td>
        Horisontal position:
       </td>
       <td>
        <input type="text" name="posHori" value="500" size="4">
       </td>
      </tr>
      <tr>
       <td>
        Vertical position:
       </td>
       <td>
        <input type="text" name="posVert" value="400" size="4">
       </td>
      </tr>
      <tr>
       <td colspan="2">
        <input type="submit" value="Submit">
       </td>
      </tr>
     </table>
    </form>

</body>