Create window-like element with mootools

We continue our serie related to mootools with a tutorial that shows us how to build a window-like element on our page, that can be resized and moved. Based on previous tutorials, we will will create first the html and apply some js code to it, to obtain what we want. This tutorial is a simple one, so will cover only the basics to help a beginner to understand easier. A future tutorial will show, based on this, ho to create a class for windows.

So, for the beginning we need to set the html.We need next elements:

the ‘window‘ div = the window itslef;

the ‘topbar‘ - the window’s topbar, that will be used to move the window and to hold the title;

the ‘resizer‘ - the element that will resize the window.

All will look something like his:

Ok, we’ll give some ids to elements, “win” for window, “topbar” for topbar, “resizer” for resizer - pretty straight :).

the html code will be something like this:

<div id="win">

    <div id="topbar">window title</div>

    <div id="resizer"></div>

 content

</div>

We won’t cover here the CSS part,please look at the demo for basic style.

Then on event domready, we set “win” to be draggable, with handle set to “topbar”, set to be resizable, with handle “resizer”, and put some limits on resize, using “limit” property. This way we avoid some bad behaviour , like minimize too much the window.

document.addEvent( 'domready' , function() {

	$('win').makeDraggable({'handle':$('topbar')});
	$('win').makeResizable({

		'handle':$('resizer') ,

		'limit':{'x':[220,400], 'y':[120,400]}

		});

} );

Well, that is all. Pretty easy and nice, no?

Here is the demo.

This is done with MooTools V1.11. A later tutorial will explain how to do this with V1.2.

Let me know your thoughts or questions.

Singles Singles

3 Comments

Leave a Comment

Username (required) :
Email (required) :
Web Site :
Comment :