Element containing another overflowing element in jquery

Question

I need to see if an element in jQuery contains another overflowing element.

I need to do this without referring to/knowing the elements that could be overflowing into it - just that some other element overflows into the current cell

Snippet below (ignoring varying widths)

$.fn.exists = function () {
    return this.length !== 0;
}

$( document ).ready(function() {
  var $element = $('td#append');
  var do_spans_exist = $('span', $element).exists();
  if ( do_spans_exist == true );
    //change top position
  add_html = $('td#append').append('<span class="span1"></span>'); //and have some top position attribute
});

.table1 {
 border:1px solid navy;
 width: 70%;
 text-align: center;
}
.table1 td {
 width: 100px;
 height: 100px;
 vertical-align: top;
 text-align: right;
 border: 1px solid #c6c6ec;
 position: relative;
  left: 0;
  position: relative;
}
.span1 {
  display: inline-block;
  width: 300px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}
div {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
  <table class="table1">
    <tr>
      <td><span class="span1"></span></td>
      <td id="append"></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>

So before I append the span in jQuery, I want to get if there are any other span elements overflowing into the cell. So I can change the position to avoid overlap.

My exists() function only gets a span that is physically in the cell rather than overflowing into it.

Thanks!

http://stackoverflow.com/questions/7668636/check-with-jquery-if-div-has-overflowing-elements or you could just compare `$('.span1').width()` aganst `$('.span1').parent().width()` — Pete, Mar 07 '17 at 12:09
So that the span can display across multiple table dividers. (width is a variable in my code) @Satpal — Ruth Young, Mar 07 '17 at 12:09
@Pete 'parent().width()' will surely give me the width of the table divider? that's not what I want this doesnt change. I need to see if any other element is present in the current element due to overflow. (if this makes sense) Haven't come across colspan I'll have a ook — Ruth Young, Mar 07 '17 at 12:13

score 1 · Answer 1 · answered Mar 07 '17 at 12:26

try this css and don't use your .table1 you will get result

.table1 td {
    width: 100px;
    height: 100px;
    vertical-align: top;
    border: 1px solid #c6c6ec;
    position: relative;
    left: 0;
    position: relative
}
.span1 {
  display: inline-block;
  width: 418px;
  height: 30px;
  background-color: blue;
  z-index: 1;
  position:absolute; 
  border: solid black 1px;
}

score 0 · Answer 2 · answered Mar 07 '17 at 12:30

0

Just check if the width of element inside another, is greater than its parent...

answered Mar 07 '17 at 12:30

Guilherme Saade

1
1

Element containing another overflowing element in jquery

2 Answers2