Find the bounding box that contains all

Question

I have (1) :

a big container : <div id="container"> which has absolute positionning
inside this container, lots of <div class="txt"> which have absolute positionning as well

enter image description here

I would like to find the coordinates of a bounding box that contains all the <div class="txt"> elements. I have this code :

minX = 1000000, maxX = - 1000000;
minY = 1000000, maxY = - 1000000;
$(".txt").each(function(index) {
  minX = Math.min(minX, parseFloat($(this).css("left")));
  maxX = Math.max(maxX, parseFloat($(this).css("left")));
  minY = Math.min(minY, parseFloat($(this).css("top")));
  maxY = Math.max(maxY, parseFloat($(this).css("top")));
});

I don't think it's really correct because maxX will contain the max of each element's left , thus the max of the top-left-corner of each element. So the bouding-box will not contain the <div> which is the most on the left. Then, in order to take this into account, I could compute

maxX = Math.max(maxX, parseFloat($(this).css("left")) + parseFloat($(this).css("width")))

but it begins to be dirty.

Is there a more elegant way to know the bounding box of lots of elements ?

Notes : (1) : It is for my project named BigPicture, the div name are a little different on the website.

(2) : would this fit more in codereview.SE ?

http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling — l2aelba, Oct 17 '14 at 09:43
Maybe you can use [`.getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect) ? — Yoshi, Oct 17 '14 at 09:45
Yes .getBoundingClientRect more faster ! http://stackoverflow.com/a/22480938/622813 — l2aelba, Oct 17 '14 at 09:48
possible duplicate of [How to tell if a DOM element is visible in the current viewport?](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport) — l2aelba, Oct 17 '14 at 09:51
Think about if you have 1000 of elements, Try to use native JS and getBoundingClientRect — l2aelba, Oct 17 '14 at 09:52
Thanks for your comments about the project @estshy @l2aelba ! If you like vegetables, don't forget to see the `recipe of moussaka` here : http://bigpicture.bi/Legumes (look at "Aubergines") ;) — Basj, Oct 17 '14 at 10:02
@l2aelba : Only problem with `.getBoundingClientRect()` : it gives screen coordinates (ie topleft corner is 0,0), but not coordinates in `absolute` positionning in the `container` `
`... — Basj, Oct 17 '14 at 10:15
Another important thing : would you do a loop on all `txt` elemnts with jQuery `each` or something else ? (for performance) — Basj, Oct 17 '14 at 10:16

score 1 · Accepted Answer · answered Oct 17 '14 at 13:32

If your using jQuery, with .position() it is probably easier to get the coordinates of the elements, use .width() and .height() to get the other needed values. The values are already numbers so there is no need for the parsing functions.

$(".txt").each(function(index) {
    var position = $(this).position();
    var width = $(this).width();
    var height = $(this).height();

    minX = Math.min(minX, position.left));
    maxX = Math.max(maxX, position.left + width);
    minY = Math.min(minY, position.top);
    maxY = Math.max(maxY, position.top + height);
});

You could also consider using vanilla JavaScript, here a link that could help you port your codebase.

In case IE < 9 compatibility is not needed:

var textElements = document.getElementsByClassName('txt');
for(var i = 0; i < textElements.length; ++i){
    minX = Math.min(minX, textElements[i].offsetLeft);
    maxX = Math.max(maxX, textElements[i].offsetLeft + textElements[i].offsetWidth);
    minY = Math.min(minY, textElements[i].offsetTop);
    maxY = Math.max(maxY, textElements[i].offsetTop + textElements[i].offsetHeight);   
}

Find the bounding box that contains all

1 Answers1