Hide div when iframe gets to certain height automatically

Question

My users book an appointment on our website which changes the height of an iframe when the iframe has changed height I want to hide the above the iframe automatically. This is what I have so far the limitation is it only works on the following events but I want it to hide the dynamically rather than on page re-size or scroll as these events dont take place

$(window).on('load resize scroll', function() {
  if ($(".remove-text").height() >= 582) {
    $("#execphp-30, #execphp-47, #execphp-48").hide();
  } else {
    $("#execphp-30, #execphp-47, #execphp-48").show();
  };
});

I use the iframeresizer js plugin to detect dynamically update the height of the iframe

This part is confusing... "I want to hide the above the iframe automatically". Nevermind. I see in the title 'Hide div'. — Gray Spectrum, Jan 31 '18 at 19:57
Check this out... https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed — Gray Spectrum, Jan 31 '18 at 20:02
https://github.com/davidjbradshaw/iframe-resizer#resizedcallback — CBroe, Feb 01 '18 at 10:27

score 0 · Answer 1 · answered Feb 01 '18 at 10:23

<script>
jQuery(function($) {

$(window).on('DOMSubtreeModified', function() {
  if ($(".remove-text").height() >= 582) {
    $("#execphp-30, #execphp-47, #execphp-48").hide();
  } else {
    $("#execphp-30, #execphp-47, #execphp-48").show();
  };
});

});
</script>

Hide div when iframe gets to certain height automatically

1 Answers1