Question

So i have a slideshow block(its responsive) and i have set min-height: 315px for this block, i really need it, but when i resize window i need to reduce min-height smoothly, right now i wrote jQuery code, so its working, but its ugly tbh.

function minHeightBehavior(width) {
        width = parseInt(width);
        element = $('#block-views-home-page-slider-block');
        sliderHeight = $('.views-field-slider').height();
        element.css('min-height', '315px');
        if (width >= 769 && width < 960) {
            console.log(sliderHeight);
            element.css('min-height', sliderHeight +'px');

        }

    }

right now blocks below the slider, is jumping up, its because for example when window screen width is 900, element height is 300 and if screen width is 899, element height is 300 too. After that if screen width is 898, element height is 299, etc.
Maybe there is a better solution out there?

Answer 1

Use the .animate method.

(and start using var for local variables)

function minHeightBehavior(width) {
        var width = parseInt(width),
            element = $('#block-views-home-page-slider-block'),
            sliderHeight = $('.views-field-slider').height(),
            minHeight = 315;

        if (width >= 769 && width < 960) {
            minHeight = sliderHeight;
        }

        element.animate({height: minHeight + 'px'}, 500, function(){
           $(this).css({'min-height': minHeight + 'px', 'height':'auto'});
        });

    }