MooResize 0.2

MooResize adds three handles to any image or other DOM Element. With these handles, you can resize your element on a easy way. It has three events, onStart, onResize and onComplete so it is very flexible too. Also it is very easy to set a ratio by the setRatio method.



Details

Author
Arian Stolwijk
Current version
0.2
GitHub
arian/MooResize
Downloads
4571
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • core/1.2.4:
    • Class.Extras
    • Element.Style
  • more/1.2.4: Drag

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.

blog comments powered by Disqus