javascript - jQuery Resizable detect elements underneath? -

i'm using 48 column grid generated gridpak render out 48 1 "span" columns illustrate 15 minute chunks of time in 12 hour period.

i want able drag 15 minute chunk increase time duration. i'm using jqueryui resizeable handle resize. problem need detect number of columns pass on when resize column. way when stop event fires can determine how many columns need span , remove them list prevent overflowing.

in snippet below, i'm using elementfrompoint() determine element corresponds elements position returns jqueryui helper element because top element.

is there better way return elements sit underneath resized column?

$(".col").resizable({    helper: "ui-resizable-helper",    maxheight: 20,    minheight: 20,    grid: 40,    handles: 'e',    resize: function(event, ui) {        console.log($(document.elementfrompoint(ui.position.left + ui.size.width, ui.position.top)));        console.log(ui.position.left + ui.size.width);      }  });

				body {  				  margin: 0;  				}  				.col {  				  background: #333;  				  height: 20px;  				  overflow: hidden;  				  white-space: nowrap;  				  text-overflow: ellipsis;  				}  				.ui-resizable-helper {  				  outline: 1px dotted #0f0;  				}                				/*!   * gridpak beta css   *   * generator - http://gridpak.com/   * created @erskinedesign   */  				/* reusable column setup */  				.col {  				  border: 0px solid rgba(0, 0, 0, 0);  				  float: left;  				  -webkit-box-sizing: border-box;  				  -moz-box-sizing: border-box;  				  box-sizing: border-box;  				  -moz-background-clip: padding-box !important;  				  -webkit-background-clip: padding-box !important;  				  background-clip: padding-box !important;  				}  				/* 1. 48 column grid 0px - infinity       -----------------------------------------------------------------------------             span 1:    2.08333333333%      span 2:    4.16666666667%      span 3:    6.25%      span 4:    8.33333333333%      span 5:    10.4166666667%      span 6:    12.5%      span 7:    14.5833333333%      span 8:    16.6666666667%      span 9:    18.75%      span 10:    20.8333333333%      span 11:    22.9166666667%      span 12:    25.0%      span 13:    27.0833333333%      span 14:    29.1666666667%      span 15:    31.25%      span 16:    33.3333333333%      span 17:    35.4166666667%      span 18:    37.5%      span 19:    39.5833333333%      span 20:    41.6666666667%      span 21:    43.75%      span 22:    45.8333333333%      span 23:    47.9166666667%      span 24:    50.0%      span 25:    52.0833333333%      span 26:    54.1666666667%      span 27:    56.25%      span 28:    58.3333333333%      span 29:    60.4166666667%      span 30:    62.5%      span 31:    64.5833333333%      span 32:    66.6666666667%      span 33:    68.75%      span 34:    70.8333333333%      span 35:    72.9166666667%      span 36:    75.0%      span 37:    77.0833333333%      span 38:    79.1666666667%      span 39:    81.25%      span 40:    83.3333333333%      span 41:    85.4166666667%      span 42:    87.5%      span 43:    89.5833333333%      span 44:    91.6666666667%      span 45:    93.75%      span 46:    95.8333333333%      span 47:    97.9166666667%      span 48:    100%            ----------------------------------------------------------------------------- */  				@media screen , (min-width: 0px) {  				  .row {  				    margin-left: -1px;  				  }  				  .col {  				    border-left-width: 1px;  				    padding: 0 0%;  				  }  				  /*          add semantic classnames in alongside corresponding spans here. e.g.                    .span_3,          .my_semantic_class_name {              ...          }          */  				  .span_1 {  				    width: 2.08333333333%;  				  }  				  .span_2 {  				    width: 4.16666666667%;  				  }  				  .span_3 {  				    width: 6.25%;  				  }  				  .span_4 {  				    width: 8.33333333333%;  				  }  				  .span_5 {  				    width: 10.4166666667%;  				  }  				  .span_6 {  				    width: 12.5%;  				  }  				  .span_7 {  				    width: 14.5833333333%;  				  }  				  .span_8 {  				    width: 16.6666666667%;  				  }  				  .span_9 {  				    width: 18.75%;  				  }  				  .span_10 {  				    width: 20.8333333333%;  				  }  				  .span_11 {  				    width: 22.9166666667%;  				  }  				  .span_12 {  				    width: 25.0%;  				  }  				  .span_13 {  				    width: 27.0833333333%;  				  }  				  .span_14 {  				    width: 29.1666666667%;  				  }  				  .span_15 {  				    width: 31.25%;  				  }  				  .span_16 {  				    width: 33.3333333333%;  				  }  				  .span_17 {  				    width: 35.4166666667%;  				  }  				  .span_18 {  				    width: 37.5%;  				  }  				  .span_19 {  				    width: 39.5833333333%;  				  }  				  .span_20 {  				    width: 41.6666666667%;  				  }  				  .span_21 {  				    width: 43.75%;  				  }  				  .span_22 {  				    width: 45.8333333333%;  				  }  				  .span_23 {  				    width: 47.9166666667%;  				  }  				  .span_24 {  				    width: 50.0%;  				  }  				  .span_25 {  				    width: 52.0833333333%;  				  }  				  .span_26 {  				    width: 54.1666666667%;  				  }  				  .span_27 {  				    width: 56.25%;  				  }  				  .span_28 {  				    width: 58.3333333333%;  				  }  				  .span_29 {  				    width: 60.4166666667%;  				  }  				  .span_30 {  				    width: 62.5%;  				  }  				  .span_31 {  				    width: 64.5833333333%;  				  }  				  .span_32 {  				    width: 66.6666666667%;  				  }  				  .span_33 {  				    width: 68.75%;  				  }  				  .span_34 {  				    width: 70.8333333333%;  				  }  				  .span_35 {  				    width: 72.9166666667%;  				  }  				  .span_36 {  				    width: 75.0%;  				  }  				  .span_37 {  				    width: 77.0833333333%;  				  }  				  .span_38 {  				    width: 79.1666666667%;  				  }  				  .span_39 {  				    width: 81.25%;  				  }  				  .span_40 {  				    width: 83.3333333333%;  				  }  				  .span_41 {  				    width: 85.4166666667%;  				  }  				  .span_42 {  				    width: 87.5%;  				  }  				  .span_43 {  				    width: 89.5833333333%;  				  }  				  .span_44 {  				    width: 91.6666666667%;  				  }  				  .span_45 {  				    width: 93.75%;  				  }  				  .span_46 {  				    width: 95.8333333333%;  				  }  				  .span_47 {  				    width: 97.9166666667%;  				  }  				  .span_48 {  				    margin-left: 0;  				    width: 100%;  				  }  				}  				

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>      <div class="page">    <div class="row">      <div class="header col span_1">1</div>      <div class="header col span_1">2</div>      <div class="header col span_1">3</div>      <div class="header col span_1">4</div>      <div class="header col span_1">5</div>      <div class="header col span_1">6</div>      <div class="header col span_1">7</div>      <div class="header col span_1">8</div>      <div class="header col span_1">9</div>      <div class="header col span_1">10</div>      <div class="header col span_1">11</div>      <div class="header col span_1">12</div>      <div class="header col span_1">13</div>      <div class="header col span_1">14</div>      <div class="header col span_1">15</div>      <div class="header col span_1">16</div>      <div class="header col span_1">17</div>      <div class="header col span_1">18</div>      <div class="header col span_1">19</div>      <div class="header col span_1">20</div>      <div class="header col span_1">21</div>      <div class="header col span_1">22</div>      <div class="header col span_1">23</div>      <div class="header col span_1">24</div>      <div class="header col span_1">25</div>      <div class="header col span_1">26</div>      <div class="header col span_1">27</div>      <div class="header col span_1">28</div>      <div class="header col span_1">29</div>      <div class="header col span_1">30</div>      <div class="header col span_1">31</div>      <div class="header col span_1">32</div>      <div class="header col span_1">33</div>      <div class="header col span_1">34</div>      <div class="header col span_1">35</div>      <div class="header col span_1">36</div>      <div class="header col span_1">37</div>      <div class="header col span_1">38</div>      <div class="header col span_1">39</div>      <div class="header col span_1">40</div>      <div class="header col span_1">41</div>      <div class="header col span_1">42</div>      <div class="header col span_1">43</div>      <div class="header col span_1">44</div>      <div class="header col span_1">45</div>      <div class="header col span_1">46</div>      <div class="header col span_1">47</div>      <div class="header col span_1">48</div>    </div>    <div class="row"></div>    <div class="row"></div>    <div class="row"></div>  </div>