CODEWITHSUNDEEP
javascriptjquerycss
Alvaro Menéndez
Alvaro Menéndez

Reputation: 9012

Can't make ready and resize functions work together

I have 2 containers placed side by side (floating). Both of these containers have multiples forms generated dinamically and I can’t know which one will be the highest.

So I use a simple script to calculate both divsheight and apply the highest to both. Easy enough and working fine:

$(document).ready(function () {
    var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
});

The forms inside are responsive, so it will be displayed in 3, 2 or 1 column depending on window width. Simple and easy css:

.form {
    float:left;
    width:50%;
    padding-right:20px;
}
@media (max-width: 800px) {
  .form {
    width:100%;
    } 
}

My problema is that I can’t seem to make the script work BOTH at resize and at ready function when the page is loaded and run the script anytime the user resize the window manually.

So far I have tried the solutions I have found here around but none Works so far and I have no idea why. I have tried:

$(document).ready(function() {
    $(window).resize(function() {
         var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
            $(".left").height(height);
            $(".right").height(height);
    }).resize();        

});

and

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
}

and

var callback = function () {
  var height = Math.max($(".left").outerHeight(),$(".right").outerHeight());
    $(".left").height(height);
    $(".right").height(height);
};

$(document).ready(callback);
$(window).resize(callback);

But while still working when reloading the window, resizing when the containers grow (under 800px) doesn’t run the script (or the height value doesn’t change).

I’m not an expert at javascript / jquery so probably I’m missing something basic but after many hours I can’t find any solution.

Here is a JSFIDDLE with an example with the original script. Any Little help would be greetly apreciated.

Upvotes: 2

Views: 53

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

The way you are handling the resize is correct, the issue is that you have already set the height of both of the divs previously, therefore they are no longer expanding/contracting to the size of their contents. I.E if the height of the divs was set to 286 on load the Math.max calculation will be using 286 when the window is resized.

To fix, reset the height before you calculate which is bigger:

$(window).resize(function() {
  $(".left, .right").height('auto');
  var height = Math.max($(".left").outerHeight(), $(".right").outerHeight());
  $(".left, .right").height(height);
}).resize();
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.left {
  float: left;
  width: 50%;
  padding-right: 20px;
  background-color: grey;
  border: 1px solid;
}
.right {
  float: left;
  width: 50%;
  background-color: grey;
}
.form {
  float: left;
  width: 50%;
  padding-right: 20px;
}
input {
  width: 100%;
}
@media (max-width: 800px) {
  .form {
    float: left;
    width: 100%;
    padding-right: 20px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="left">
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
</div>
<div class="right">
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
  <div class="form">
    <p>form</p>
    <input type="text">
  </div>
</div>

Upvotes: 1

Related Questions