CSSgallery.info

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.

It seems that MooTools team just released the stable 1.2 version of popular framework mootools. Great job, and a big step forward.My only concern is what is going to happen with 1.11, as the website for the moment is working in a reduced form, docs, download being available only, but as they said “At least you can download, right?” :) Again, congratulations!    

The today tutorial will try to explain how to make an element draggable or resizable - or even both in the same time, using the MooTools framework. To accomplish this we’ll make use of two functions existent in mootools: makeDraggable() and makeResizable().

This is very simple.We simply select the element we want to be resizable or draggable and use one of those functions:

$(’id_of_the_element’).makeDraggable();

or

$(’id_of_the_element’).makeResizable();

A good idea would be to set in css of the elements “position:relative” as, those functions assume that elements are positioned absolute, and may break your layout. But this depends on the layout you have.

Doing so, a drag of the element will drag it or resize it.

There are some parameters we can use for this functions.

One of this is ‘handle‘. Handle passed to the function will tell what other element is used to manage the drag or the resize of the main element.so something like :

$(’id_of_the_element’).makeResizable({handle:$(’id_of_handler’)});

will have the effect we obtain in demo page, for the orange div.

What do you have to pay attention on is that handle is an selected element so we need to use $(’id_of_handler’).

In the next tutorial we will try to use all the knowledge we learned until now - select and create elements, add events and make draggable or resizable, to create a window-like element than can be resized or moved around our page.