CODEWITHSUNDEEP
javascriptjquerycssresizeheight
user4157770
user4157770

Reputation:

Detect element height changes and hide if too small

I am working with a payment gateway widget and need to detect when its height had changed. To do this, I need to target the first .col-xs-12 within my container and detect if its height has changed.

If its height has changed, I then need to check if the height is less than 310px.

If that is the case, I need the whole row to hide.

I have tried what you see below but it doesnt seem to be working.

var $paywhirlWidget = $("#payment-signup-section .container .row .col-xs-12:first-child"),
  lastHeight = $("#payment-signup-section .container .row .col-xs-12:first-child").height();

function checkForChanges() {
  if ($paywhirlWidget.height() != lastHeight) {
    if($paywhirlWidget.height() <= 310) {
        $paywhirlWidget.css("display", "none");
    }
    lastHeight = $paywhirlWidget.height();
  }
}

setTimeout(checkForChanges, 500);

Upvotes: 0

Views: 197

Answers (1)

mhodges
mhodges

Reputation: 11136

As per request: A couple things I notice right off the bat are that you are using setTimeout, which only executes one time. You would be looking for the function setInterval() to keep checking if the size updates.

Upvotes: 1

Related Questions