title: JQuery Resizable - Update element absolute position while resizing
body: <p>I have many <code>div</code>s distributed in rows and columns, (generated using jQuery). Each one of these <code>div</code>s is re-sizable, using JQuery UI Resizable. In order to define the requirements, all <code>div</code>s <strong>must use absolute positioning</strong>. So, when I re-size any of these divs, the script should update the <code>top</code> attribute of all divs below this, (located in the same column and one row after the current resizing div).</p>
  
  <p>This is the code I have now:</p>
  
  <pre><code>updatePositions: function() {
          var update = 0;
          $(".element").resizable({
              handles: 's',
              start: function(event, ui) {
                  event.stopPropagation();
                  var el = $(this);
                  var el_row = parseInt(el.attr("row"));
                  var el_rel = parseInt(el.attr("rel"));
                  var el_col = parseInt(el.attr("col"));
                  update = $(".element").filter(function() {
                      return(
                          $(this).attr("row") &gt; el_row &amp;&amp;
                          $(this).attr("col") == el_col &amp;&amp;
                          $(this).attr("rel") != el_rel
                      );
                      });
              },
              resize: function(event, ui) {
                  update.each(function(event){
                      var top = $(this).position().top + $(this).height() + 20;
                      $(this).css("top", top )
                  });
              }
          })
      }
  </code></pre>
  
  <p>And here is an example: <a href="http://jsfiddle.net/fedeleoncba/sPdZB" rel="nofollow">JSFiddle</a></p>
  
  <p>As you can see, all the divs are found just right and I can update the top position. But for some reason it's getting crazy when resizing! It seems like I'm doing the update as many times as found tiles on each selected div.</p>