We continue our series 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 in order 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.

It look something like his:

Ok, we’ll give some ids to the 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 a 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, isn’t it?

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.