Checking Element Height in real time

[alexanderwong]

Dear JS ninjas,

Please advise how can I check an element’s height in real time, and when it does, it runs the function I have written below:

$(function() {
    var render = $("div.gm-build-preview-box").height();
    var win = $(window).height();
    if (render > win) {
        $("div.gm-build-preview-box").addClass('gm-extended');
    } else {
        $("div.gm-build-preview-box").removeClass('gm-extended');
    }
});

Why do I need to do it in real time? That’s because the user gets to add or remove stuff as they see fit. And when they do that, I need to add or remove class to ensure the layout doesn’t break. The code works, but it needs some kind of trigger that checks the height in real time. Please advise.

[samliew (webflowexpert.com)]

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    var $render = $("div.gm-build-preview-box");
    setTimeout(function() {
        $render.toggleClass('gm-extended', 
            $render.height() >= $(window).height()
        );
    }, 100);
});
</script>

[alexanderwong]

thanks @samliew. Much appreciated help!