Minimize/Maximize a Browser Window

Use these to jump around or read it all…

[The Code]

[Here’s What’s Happening]

This is an effect I have been using for a short while on some other sites I’ve worked on, and I thought it might make a nice tutorial. I’m really sorry to say that at the time of this tutorial (7/28/00 – Kathie Lee’s last day with Regis) it only works on Netscape Navigator 4.0 and above.

I mainly use the effect when I open smaller windows, in order to allow the user to see one piece of code while reading over text in the larger, parent window. Often I’ll have two extra windows apart from the parent, and these commands will allow the user to minimize and maximize the windows.

Mind you, I only offer the code on pages that will display on Navigator 4.0 and above. I get that effect by using an internal browser test script.

OK, enough talking. Let’s see it. The example will open in a new window so you can see the effect. Please understand you must be running Netscape Navigator 4 or better to see it. Once you click “minimize”, wait one moment. Not only will the screen get smaller, it’ll jump to the bottom right portion of the screen. It’s really a neat effect.

Click me

---

The Code

<SCRIPT LANGUAGE=”JavaScript”>

function Minimize()
{
window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;
}

function Maximize()
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
</SCRIPT>

<A HREF=”javascript:onClick=Minimize()”>Minimize</A>
<A HREF=”javascript:onClick=Maximize()”>Maximize</A>

---

Here’s What’s Happening

You’ll notice that I have actually set up two functions, one that maximizes and one that minimizes. If you understand one, then you’ll certainly be able to pick apart the other. Let’s look at the first one.

There are other methods of getting the same resize effect, but the first time I saw this done, the author used the innerWidth and innerHeight commands, so I kept it that way. Those two commands deal with the inner browser window measurements in pixels. Notice I have the window set to measure 100 by 100 pixels.

The next two lines set a point so that the alwaysLowered command will be able to lower and move the window to the bottom right of the screen. The minimize sets the X and Y to the full screen size and the Maximize sets it to the zero points so the maximized screen goes all the way up to the left-hand corner.

The triggers for the events are JavaScript links:

<A HREF=”javascript:onClick=Minimize()”>Minimize</A>

Click on a link and one function or the other is triggered. Your screen will minimize or maximize. Since the script is set up to read and work with whatever screen setting you or your users have set up, just copy, paste, and you’re good to go.

---

That’s That

This isn’t an effect you’ll want to use a great deal. I use it only sparingly myself, but I have used it.

When you do incorporate it into a page, be sure you put the links that create the effect in the upper left-hand corner. That way they will be visible even when the screen minimizes and jumps down to the lower right-hand corner.

Enjoy.

[The Code]

[Here’s What’s Happening]