-1

I have a function that grabs the largest height (maxHeight) of one div and sets two adjacent divs to be equal to the maxHeight. I am trying to invoke the this function, and update the maxHeight, every time the window is resized. Thank you for your help.

Codepen

function setEqualHeight() {
  var maxHeight = 0;
  var height1 = $("#shopify-section-1502392377646").height();
  var height2 = $("#shopify-section-1502392409157").height();
  var height3 = $("#shopify-section-1502392513501").height();

  if (height1 > maxHeight) {
    maxHeight = height1;
  }
  if (height2 > maxHeight) {
    maxHeight = height2;
  }
  if (height3 > maxHeight) {
    maxHeight = height3;
  }

  $("#shopify-section-1502392377646").height(maxHeight);
  $("#shopify-section-1502392409157").height(maxHeight);
  $("#shopify-section-1502392513501").height(maxHeight);
};

setEqualHeight();

window.onresize = setEqualHeight();
#shopify-section-1502392377646,
#shopify-section-1502392409157,
#shopify-section-1502392513501 {
  width: 33.333333333333333%;
  display: inline-block;
  float: left;
  color: #fff;
}
#shopify-section-1502392377646 {
  background: #023861;
}
#shopify-section-1502392409157 {
  background: #055c9e;
}
#shopify-section-1502392513501 {
  background: #3087ca;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shopify-section-1502392377646">
  Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.
</div>
<div id="shopify-section-1502392409157">
  Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach
  fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.
</div>
<div id="shopify-section-1502392513501">
  Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.
</div>
NinoLopezWeb
  • 151
  • 10
  • 1
    Check out my jsFiddle: https://jsfiddle.net/k5puy79u/1/... used a paragraph tag to get actual height of text and resize accordingly. – Donald Powell Aug 10 '17 at 22:09

1 Answers1

1

You should use:

window.onresize = setEqualHeight

Your current code set the return value of the function to the onresize, and this is not what you are looking for.

Dekel
  • 60,707
  • 10
  • 101
  • 129