In this article, I'll try to explain you how you could create a window manager in DHTML. I guess it's fairly easy to understand the code once you understand the concept, since the code is about 150 lines long (including a lot of comments)!

WHAT IS A WINDOW MANAGER SUPPOSED TO DO?

This is probably the most important question... A window manager has to do multiple things: it has to create windows, make them interact with the mouse and destroy them. Possible interactions with the mouse can be moving a window, resizing a window or bringing a window to top.

FIRST STEP: CREATE AND DESTROY A WINDOW

Think of an HTML document as a table, on which you can put papers. In the HTML world, one of the elements (=papers) you can put in the document (=table) are DIVs. DIVs can be positioned whereever you want on the HTML document, can have sizes and orders.

To create a DIV, the only thing you need to do is to call document.createElement("DIV"). This call will return a reference to the newly created DIV, and you can use that reference to set all the properties you like (identifier of the DIV, its position, size, content, etc.). Once you've finished setting the properties you want, you need to attach the DIV to the document to make it visible: document.body.appendChild(object).

Up there, we had set an identifier to our newly created DIV. We can actually use that identifier to obtain a reference to our DIV, using the document.getElementById call. Once we have the reference to the DIV, we can use document.body.removeChild(object) to destroy it. To see all this in action, click here. Once you've player with the thing, you can right click on the window and say "view source" to view the JavaScript code.

SECOND STEP: INTERACT WITH THE MOUSE

DHTML is a language filled with so-called "events": the document having finished loading is an event, the browser being resized is an event, the user pressing the key is event, the mouse moving on the document is another event. You can of course react to those events. For example, to react to the event that occurs when the mouse moves, simply write document.onmousemove=MouseMovementHandler. In this case, the MouseMovementHandler function will automatically be called every time the mouse moves.

In that function, we can therefore also obtain the current position of the mouse. Once we have that, the only thing we need to do is to compare the old mouse position with the new one, and move or resize DIVs as needed. You can try it out here: click on "TEST" to create a "window", drag using the red corner to drag the window, drag using the blue corner to resize the window, and click on the upper right corner to close it.

THIRD STEP: BRING WINDOWS TO TOP

As I told you before, DIVs also have so called "z-indexes". Think of it like this: if an object has a bigger z-index, it is closer to you and if its z-index if smaller it is further away from you. Therefore, if we have multiple DIVs on our page, only DIVs with the biggest z-indexes will be visible, the other ones will be hidden.

Therefore, to bring a window to top, the only thing to do is to give it the biggest z-index among all windows. See the example 3 for this, where you can click on the green corner of the window to bring it to top.

FOURTH STEP: MAKE IT LOOK GOOD

Now that we came here, two things are missing: first, the windows don't actually look like windows (they're four rectangles, awful and not very useful) and second the code doesn't have any comments (a good program always has a lot of comments to explain what is being done).

To paint the windows, it's fairly easy: we just create some images, and put them in different cells of a table. You can easily do one in any HTML software you want, and I've copied the one I use on my web site. And, I've also put comments. Click here to see the fourth example, and don't forget to right click on the page and view the source to understand how it works.

Click here to download the ZIP file with all the examples (including images used in the fourth step)