Change 3 elements height based on 4th

Question

    $(document).ready(function() {
      $(window).resize(function() {
        var altura = $(".textiu").height();
        if (altura > 20) {
          $('.logo').css("background-color", "yellow")
        }
      });
    });

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}
.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}
.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}
.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> 
  </button>
  <button class="butt"><span class="textiu">Portfólio</span><span class="fotiu"></span> 
  </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu">   </span> 
  </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> 
  </button>
</div>

This is the fiddle. https://jsfiddle.net/ks6udwLc/

What I need:

• I want to change the height of the span with text (.textiu), based on the first one's size (it's got two words, so on browser resizing it breaks into two lines and messes the layout).

• In the JavaScript I posted, it works on my browser (Chrome). Right now I'm changing another div's color just to check if it was working, since I don't know how to proceed. So I've got 3 questions:

  1. How I can make the .height check without a fixed number? I was thinking of maybe getting the span height, and use something like if(altura > altura + 50% of altura or something like that). It is possible?

  2. How can I change the height of the other buttons? I would change height and add a <br> to get the text to the bottom of the space, just like the bigger one. Saw some use of (this) or similar in jQuery, but couldn't figure it out. All the buttons have the same class, by the way.

  3. Finally, is jQuery actually is the best way for this, or I should just use a media query for this?

Answer 1

Look at this and tell me what you think https://jsfiddle.net/ks6udwLc/1/

$(document).ready(function() {
  $(window).resize(function() {
    var altura1 = $(".butt:nth-child(1) .textiu").height();
    $('.butt:nth-child(n+2) .textiu').css("lineHeight", altura1 + 'px');
  });
});

At first we check height of span with text in first button. Then we just set same height to other spans like the first one. The selector :nth-child(n+2) mean we work on elements with index >=2 (0+2=2 , 1+2=3, etc).

EDIT2: One more explanation - I set line-height to last three elements, because they have only one words and this attribute makes them height as the first one and the text is centered verticaly :)

Answer 2

see here jsfiddle or the snippet below

( i'm not saying it's the best solution but it works :) )

i used .on( "resize",function() instead of just .resize() because on() works dinamically, so you don't need to refresh the page to see the results

see here more : on() or here .on('click') vs .click() ( it's about click() function but the logic is the same )

then, i've set 2 variables highestText and highestBut with the value 0

then using an .each(function(){ ( info here ) , i am comparing the heights of the elements with the same classes ( first .textiu and then .butt , it doesn't matter the order ) against eachother and whenever i find and element that is bigger than the previous one, i give the value of its height to the variable

so for example i compare the spans with class textiu . first textiu has a height of 20px . the if does this : is 20px > 0 ? YES -> highestText=20px .

then second element has height of 15px. is 15px > 20px ? NO - > do nothing, move to the next element. and so on.

so at the end of the each function , the variable highestText has the value of the height of the element with the biggest height :)

the logic is that if any element has a bigger height than the rest ( when resizing the window ) the rest will inherit that height so they all will have the same height ( the biggest height )

and the same for the .butt

hope i explained ok and let me know if the solution works for you ;)

EDIT : you were saying something about $(this) ,

this is a reference to the member that invokes the current function

so for example in my solution below

  $('.textiu').each(function(){  
            if($(this).height() > highestText){  
            highestText = $(this).height();  
    }

$(this) refers to .textiu

see more here What is $(this)? or here $(this) might be confusing

CLICK BELOW TO SEE SNIPPET

$(window).on( "resize",function() {
    var highestText = 0,
        highestBut = 0
         
        $('.textiu').each(function(){  
                if($(this).height() > highestText){  
                highestText = $(this).height();  
        }
         });
         $('.butt').each(function(){  
                if($(this).height() > highestBut){  
                highestBut = $(this).height();  
        }
         });
      $('.butt').height(highestBut);  
    $('.textiu').height(highestText);

});

.logo {
  background-color: gray;
  height: 50px;
  padding-top: 4%;
  padding-bottom: 2%;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-content: center;
  width: 100%;
}

.textiu {
  display: block;
  background-color: orange;
  padding-top: 5%;
  padding-bottom: 5%;
  background-color: orange;
  color: white;
  transition: background-color, color, 1s;
}

.fotiu {
  display: block;
  background-color: white;
  height: 60px;
}

.butt {
  background-color: Transparent;
  width: 100%;
  padding: 0;
  border: 0;
  position: relative;
  transition: background-color 1s;
  border-right: 1px solid #e6e6ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo"></div>
<div class="menu">
  <button class="butt"><span class="textiu">Quem Somos</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Portfólio</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Contato</span><span class="fotiu"></span> </button>
  <button class="butt"><span class="textiu">Facebook</span><span class="fotiu"></span> </button>
</div>