CODEWITHSUNDEEP
jquerycssresize
Petro Popelyshko
Petro Popelyshko

Reputation: 1379

Change min-height depending on my div height

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?

Upvotes: 0

Views: 1467

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

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'});
        });

    }

Upvotes: 2

erwin_smit
erwin_smit

Reputation: 700

Is there not a way to set the min-height as a percentage? Instead of using pixels.

Upvotes: 0

Related Questions