How to use

First you have to include the javascript file in the head of your document

<script src="../Source/MooResize.js" type="text/javascript"></script>

In the body

<img id="resizeMe" src="image.jpg" alt="Look, you can resize me" />

Then add the following javascript

new resize = new MooResize('resizeMe');

And you're done!

Other Example

var resize = new MooResize('img1',{
    handleSize: 15,
    handleStyle: {
        background: 'blue'
    },
    onStart: function(){
        document.id(this).setStyle('opacity',0.5);
    },
    onComplete: function(size){
        document.id(this).setStyle('opacity',1); 
        alert(size.x+' '+size.y);
    },
    minSize: {
        x: 100,
        y: 50
    }
});

Class Mooresize

MooResize method: constructor

new MooResize(element[,options]);

Arguments

1. element - (string,element) The element to be resized
2. options - (object,optional) The MooResize Options. See below

Options

1. handleSize - (number: defaults to 10) The size of the handles
2. minSize - (object) The minimum size. You can set an object for the minimum size e.g. {x: 100, y: 75}
3. maxSize - (object) The maximum size. You can set an object for the maximum size e.g. {x: 400, y: 300}
4. ratio - (boolean,float: defaults to false) Should it keep a ratio: true or false. If you set a float, e.g. 1.5 you can set the width/height ratio
5. dragOptions: (object) The options of MooTools More's Drag
6. handleStyle: (object) Style the handles

Events

1. start - (function) Fires when you start resizing
2. resize - (function) When you are resizing
3. complete - (function) When you're ready with resizing

MooResize Method: setSize

Set the size of the element (including the new position of the handles)

Syntax

resize.setSize(width,height);

// Or

resize.setSize({x: 500, y: 400});

Arguments

1. width - (number,object) - The new width. Or an object like {x: 300, y: 200}
2. height - (number) - The new height. This is optional if the first argument is an object

Returns

• (MooResize) - MooResize instance

MooResize Method: getSize

Get the size of the element

Syntax

resize.getSize(); // {x: 256, y: 643}

Returns

• (object) - An object with x and y

MooResize Method: setRatio

Set a ratio

Syntax

resize.ratio(ratio);

Arguments

1. ratio - (boolean,float) - Just true or false, or a width/height number

Returns

• (MooResize) - MooResize instance

MooCss Method: getRatio

Get the current ratio as width/height

Syntax

resize.getRatio(); // 1.25

Returns

• (float) - The ratio

MooResize Method: dispose

Remove the handles

Syntax

resize.dispose();

MooResize Method toElement

Get your element back

Syntax

document.id(resize);

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.