Question

How to get an empty (in example white) area in a container with Javascript?
Is there a ready jQuery function or something equal?

I need the width, height, left and top position of the ’empty’ white area in Javascript.

http://jsfiddle.net/P4QHj/

HTML

<div id="container">
  <div class="box-item a">A</div>
  <div class="box-item d">D</div>
  <div class="box-item e">E</div>
  <div class="box-item f">F</div>
</div>​

CSS

.box-item {
 width: 100px;
 height: 100px;
 background-color: grey;
 display:block;
 position:absolute;
}

#container {
 position:relative;
 width:300px;
 height:300px;
 min-width:300px;
 max-width:300px;
}

.a {
 position:relative;
 left:100px;
 width:200px;
 height:200px;
}

.d {
 left:0px;
 top: 200px;    
}
.e {
 left:100px;
 top: 200px;    
}
.f {
 left:200px;
 top: 200px;    
}

​

TIA
frgtv10

Answer 1

In your case it’s easy: You know the layout, take the left value of “A” and the top value of the other elements – 100 x 200px.

For a more general solution with unknown space and unknown elements positions, you can only apply a grid/table on the container.

1. get dimensions of your #container
2. choose a grid spacing (in your case: 100px, to get all space in unknown layouts use 1px)
3. Build a two-dimensional array of the size “dimension” / “grid interval” (here: 3x3) of boolean values or zeros
4. loop over all box-items
   1. get position and dimension of the box
   2. divide through grid interval
   3. increase the coverage count (or set to true) of the respective values in the array
5. The spaces still have 0/false value in the grid. Multiply their indizes with the grid spacing to get the coordinates.

For getting dimensions, jQuery’s width/height functions can be of help. For the positions, you will need to read the top/left style values. They would be much easier to get when written as inline styles, not with ids (or even once-used classes) in a style sheet.