(function() {
jQuery.fn['bounds'] = function () {
var bounds = { left: Number.POSITIVE_INFINITY,
top: Number.POSITIVE_INFINITY,
right: Number.NEGATIVE_INFINITY,
bottom: Number.NEGATIVE_INFINITY};
this.each(function (i,el) {
var elQ = $(el);
var off = elQ.offset();
off.right = off.left + $(elQ).width();
off.bottom = off.top + $(elQ).height();
if (off.left < bounds.left)
bounds.left = off.left;
if (off.top < bounds.top)
bounds.top = off.top;
if (off.right > bounds.right)
bounds.right = off.right;
if (off.bottom > bounds.bottom)
bounds.bottom = off.bottom;
});
return bounds;
}
})();
jQuery bounding region plugin
While working on some javascript network visualization software I am coding for work I came up with a jQuery plugin function that calculates the bounding box around the query using offset() and width() and height() returning an object that has left,top,bottom, and right members.
3 comments:
So, this returns the bounds of a box that would contain all of the elements specified by the query?
Yes, it returns the rectangle that encloses the query in absolute coordinates.
I don't think this takes margins, padding, borders, etc., into account. jQuery's .width() and .height() methods return the dimensions of content areas only.
Post a Comment