CODEWITHSUNDEEP
jqueryhtmlperformance
Drew
Drew

Reputation: 524

jquery window resize div height

I am trying to resize a div's height when the page change's size. In my current state it works great on page load. But when I go to change the browser size it does not work. If I throw an alert in the script it fires every time the page resizes but won't change the css of the div.

    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">dddA box full of teddddddddddxt and sometdddhing elsdedd andd else adnd dsomddething besiddeds dddddd dddddd ddd ddd d ddddeddxdtdd andddddd somdddddething else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of texdt and something else and else and something besiclasss text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of tdext and something else and else and something besiclasss text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of tedxt and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of text and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-4">
        <div class="page" style="margin-top:15px;height:auto;background-color:grey;padding-top:15px;">
            <div id="topbox" style="width:170px;height:100px;margin:15px;background-color:white;"></div>
            <div class="text">A box full of text and something else and else and something besides text and something else.</p>
            </div>
        </div>
    </div>
</div>

jquery script:

<script>
      $(document).ready(function() {
         var bodyheight = $('.text').height();
         $(".text").height(bodyheight);
     });

      $(window).resize(function() {
         function checkWidth(){
         var bodyheight = $('.text').height();
         $(".text").height(bodyheight);     
      }
       checkWidth();
       $(window).resize();
    });

</script>

Is this possible to do and if so how much work on browser is it to use something like this? Thanks for your help.

Fiddle here: http://jsfiddle.net/g9c41hfv/

Second Fiddle: http://jsfiddle.net/d1a0rv8r/ you have to resize screen to start it

Upvotes: 2

Views: 2643

Answers (2)

sjm
sjm

Reputation: 5468

I think the syntax you are looking for is:

$(window).resize( function() { checkWidth() });

Upvotes: 1

BaBL86
BaBL86

Reputation: 2622

You're JS code to work in resize must be:

function checkWidth() {
    var text = $('.text').height();
    $(".text").height(text+10);
}


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

But you have an Logic error: $(node).height($(node).height()) - do nothing!

Upvotes: 2

Related Questions