MooTools

How to use

Rectangle is essentially very easy to use, to create a new Rectangle use the new construct.

new Rectangle(/*left*/10, /*top*/10, /*width*/10, /*height*/10);

To get an empty rectangle use the Rectangle.Empty-propety. Also, if you try to create a empty rectangle, it will return the empty rectangle, therefore the following is true:

new Rectangle(/*left*/10, /*top*/10, /*width*/0, /*height*/0) === Rectangle.Empty;

Another way to check this is to use the isEmpty() function on the rectangle-object.

To get a rectangle bouding a dom-element you can do this:

var rect = $(dom_elm).getRectangle();

Documentation

Rectangle supports 8 getters:

• int getLeft(): Get's the left-most point of the rectangle
• int getRight(): Get's the right-most point of the rectangle
• int getTop(): Get's the top-most point of the rectangle
• int getBottom(): Get's the bottom-most point of the rectangle
• int getHeight(): Get's the height of the rectangle
• int getWidth(): Get's the width of the rectangle
• int getSize(): Get's the size of the rectangle
• bool isEmpty(): Get's a value spesifying wheater or not the rectangle is empty.

Also, to calculate intersection between 2 rectangles use the Rectangle getIntersection(Rectangle rect)-function.

var rectDiv1 = $('div1').getRectangle();
var rectDiv2 = $('div2').getRectangle();
if(rectDiv1.getIntersection(rectDiv2).getSize() > 10) {
    alert('more than 10 px overlap!');
}

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.