CODEWITHSUNDEEP
javascriptjqueryhtmlcsswindow-resize
Lidia K.
Lidia K.

Reputation: 279

Update elements height when resize window

I have a JS code:

var setPostHeaderHeightsInSlider = function() {
    var titlesHeight = 0;
    var teasersHeight = 0;

    $('.posts-slider .post-item').each(function() {
        var titleHeight = $(this).find('.post .post-header h3').height();
        var teaserHeight = $(this).find('.post .post-header p').height();

        if (titleHeight > titlesHeight) {
            titlesHeight = titleHeight;
            $('.posts-slider .post-item .post .post-header h3').css('height', titlesHeight);
        }

        if (teaserHeight > teasersHeight) {
            teasersHeight = teaserHeight;
            $('.posts-slider .post-item .post .post-header p').css('height', teasersHeight);
        }
    });
};

var onResize = function() {
    console.log('resize');
    setPostHeaderHeightsInSlider();
};

$(document).ready(function () {
    onResize();
    $(window).on('resize', function(){
        onResize();
    });
}

I need update heights of elements when window resize but my code doesn't work.

I see text in console but heights doesn't update.

@edit:

I put my html code.

HTML:

<div class="posts-slider swiper-container w-100 fl">
    <div class="swiper-wrapper">
        <div class="post-item swiper-slide ph4 pt3">
            <a href="artykul.html" class="w-100 fl">
                <article class="post w-100 fl">
                    <figure class="post-photo w-100 tc fl ma0 relative">
                        <img src="img/post_01.jpg" alt="Post 01" class="dib mw-100">
                    </figure>
                    <header class="post-header w-100 tl fl">
                        <h3 class="ma0 mt3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
                        <p class="ma0 mt3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, itaque, sapiente! Aliquid autem, deserunt dicta dolorum earum eius explicabo incidunt, modi natus temporibus ullam ut vel voluptatum? Libero recusandae, unde?</p>
                     </header>
                     <footer class="post-footer w-100 tl fl">
                          <p class="pv3 ma0 mt4">22 czerwca 2017</p>
                     </footer>
               </article>
          </a>
      </div>
   </div>
 </div>

Height is set only when the page is refreshed.

Upvotes: 1

Views: 615

Answers (2)

Selvakumar
Selvakumar

Reputation: 537

replace this lines, it will work for you

    var titleHeight = $(this).find('.post .post-header h3').removeAttr("style").height();
    var teaserHeight = $(this).find('.post .post-header p').removeAttr("style").height();

Upvotes: 1

saifudeen ni
saifudeen ni

Reputation: 145

Please try the code by removing the p, h3.
It means,
(by taking your code) $(this).find('.post .post-header').height(); instead of
$(this).find('.post .post-header p').height();

Upvotes: 0

Related Questions