MinMax Elements

I built this JavaScript so that I could get a windows like minimize and maximize effect. There are a few things I had to put in that make it a bit more flexible for the web environment.

 

This area can be minimized and maximized from calling the appropriate JavaScript functions.

Click the top right hand square to minimize and maximise.

The effect should work on any block element on the page. I have an example below using a div that has been styled to look vaguely like a window. To minimize this div element I just call the minimize method and pass it an object with the relevant details. I need to tell the script the id of the element to minimize, where to minimize it to i.e. x and y coordinates, the width and height of the element and lastly the top left position of the element. Some of this stuff can be missed as the script will find what it can automatically, like width, height, top, left plus it will default the x and y coord's to zero if they are missed. Another optional variable is the callback method, if you assign a function to this variable it will be called when the animation has finished.

So in my example I have called this method to minimize the div element. The callback method I have told it to call just shows a secound styled element on the page that looks like a minimized window.

document.minimize({ id:'element1', callback:MinMax_Callback, x:280,y:200, width:200,height:200, top:530,left:675 });







My minimized looking bar has a link to maximise the element back again. This time we can pass the exact same variables as before but notice I have missed the left and top variables out, this is because I'll just let the script find out where the element is on the page from when it was minimized and maximise it from there.

document.maximize({ id:'element1', callback:MinMax_Callback, x:675,y:530, width:200,height:200 });

So you can minimize and maximize an element from any position on the page to any other position on the page just by telling the script where you want things to start and end up.

As always I've got a simple test page so that anyone can look at the source to see how it works or just download the source.


Tested to work in the following browsers;

  • IE 7, 6
  • FireFox 2.0.0.12
  • Opera 9.24
  • Safari (for windows) 3.0.4

Last Updated : 25 February 2008