Moving The Browser Source Code

Javascript Tricks

Moving the Browser Source Code:

You can use the navigator object to alter browser attributes include the window size and the position of the browser on your screen. The example works with both IE and Netscape, although IE doesn't seem to let JavaScript change the window size.

Source Code

 <script>
 
 // move moves the position of the window
 // it's current location. 
 // positive xinc will move to the right (neg to the left)
 // positive yinc will move down (neg up)
 
 function move( xinc, yinc ) {
     var jsize=20;
     window.moveBy(jsize*xinc,jsize*yinc);
 }
 
 // random jump to anywhere
 
 function hjump() {
     xpos = Math.random() * 600
     ypos = Math.random() * 200
     window.moveTo(xpos,ypos);
 }
 
 // variable used to keep track of when the game is running
 var running=0;
 
 // start up the game 
 function hyperspace_game() {
     running=1;
     hyperspace_move();
 }
 
 // stop the game
 function stop_hyperspace_game() {
     running=0;
 }
 
 // Make a single game move by moving the image to a random
 // location and then setting up to call this routine again
 // after some delay. The delay before the next call is 
 // based on the value of the speed field (the user can change).
 
 function hyperspace_move() {
     var delay = document.forms["frm"].speed.value;
     if (delay < 500) {
         document.forms["frm"].speed.value = 500;
     }
     if (running == 1) {
         hjump();
         window.setTimeout("hyperspace_move()",delay);
     }
 }
 
 document.onUnload="restore();";
 </script>
 
 
 <table height="380" width="200" border="2">
 <tr><td bgcolor="cyan">
 
 <form id="frm">
 
 <p style="text-align:center">Move the Browser</p>
 
 <table border="0" align="center">
   <tr>
     <td> </td>
     <td align="center">
       <input type="button" id="up" value="up" onclick="move(0,-1)"
              style="width:50; height:50; font-weight:bold;"  />
     </td>
     <td> </td>
   </tr>
 
   <tr>
     <td align="center">
       <input type="button" id="left" value="left" onclick="move(-1,0)" 
          style="width:50; height:50; font-weight:bold;"  />
     </td>
     <td> </td>
     <td align="center">
        <input type="button" id="right" value="right" onclick="move(1,0)" 
          style="width:50; height:50; font-weight:bold;"  />
      </td>
   </tr>
 
   <tr>
     <td> </td>
     <td align="center">
        <input type="button" id="down" value="down" onclick="move(0,1)" 
          style="width:50; height:50; font-weight:bold;"  />
     </td>
     <td> </td>
   </tr>
 </table>
 
 <p style="text-align:center">
   <input type="button" id="jump" value="random jump" onclick="hjump()"
          style="width:100; height:50; font-weight:bold;"  />
 
 </p>
 
 <hr />
 <h3 style="text-align:center">Play the chase game</h3>
 
 <p  style="text-align:center">
 <input type="button" id="chase" value="start" onclick="hyperspace_game()" 
        style="width:100; height:50; font-weight:bold;"  />
 <input type="button" id="chase" value="stop" onclick="stop_hyperspace_game()"
          style="width:100; height:50; font-weight:bold;"  />
 </p>
 
 <p style="text-align:center">
 Speed : <input type="text" size="5" id="speed" />
 </p>
 
 <hr />
 </form>
 
 </td></tr></table>
 
 <script>
 // save the initial window size (so we can restore it)
 savewidth =  window.innerWidth;
 saveheight = window.innerHeight;
 
 function restore() {
   // change the window size to the original values
   window.innerWidth=savewidth;
   window.innerHeight=saveheight;
   window.resizeTo(savewidth,saveheight);
 }
 
 
 // change the window size to hold the controls only
 //window.innerwidth=220;
 //window.innerheight=550;
 
 window.resizeTo(300,900);
 
 // initialize the game speed field to 2000
 document.forms["frm"].speed.value=2000;
 </script>