MooTools rectangle adds functionallity to calculate rectangles and intersection between fictionate or existing elements on the page.
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();
Rectangle supports 8 getters:
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!');
}
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