Get height of element then add class/change css

Question

I'm trying to get the height of every h2 in a div, then if that height is higher than 21px, apply a class to that h2 or change his css.

The reason for that is that I have my project titles overlapping the tags when they're longer than a single line :

http://www.elisagilis.be

so far I've tried this :

$('.post-details h2').each(function(){
     if($(this).height() > 21)
     {
         $(this).css({"margin-top": "315px", "line-height": "28px"});
     }
 });

AND this :

$('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

None of them work. I've tried without using each as well, didn't work because it would select all of my h2 and apply the css/class to all of them. - if you have a better solution than the ones I'm considering they're welcome as well.

Many thanks for your help!

Answer 1

I think this is what you are looking for

<h2>some text</h2>
<h2>some text<br>some more</h2>

.border {border:1px solid blue;}

$('h2').each(function(){

    alert($(this).height()); 

    if($(this).height() > 30)
    {
        $(this).addClass('border');
    }
});

Just change it to your preferences.

https://jsfiddle.net/370mg7ak/1/

Answer 2

maybe this is what you want: FIDDLE

HTML

<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">one line</span>
</div>
<div class="cta">
    <span class="cta-title">this will take up two lines</span>
</div>

CSS

.cta { width: 100px; float: left; height: 100px; border: 1px solid black; }
.cta-title { width: 100%; color: white; background: black; display: inline-block; }
.two-line { background-color: red; }

jQuery

$(document).ready(function() {
$(function(){
  var $tArray = $('div.cta').children('span');
  $tArray.each(function(){
    if ($(this).height() > 18) {
        $(this).addClass('two-line');
    }
  });
});
    });

Answer 3

In order to make the values change dynamically as the window is resizing, try this:

$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
    {
        $(this).addClass('margintop');
    }
});

This attaches to the window's onresize event and filters the events based on the ".post-details h2" selector. However, in this case you may also have to account for if the page size is made larger again, then you also need the initialize case.

//Initial setup
$(".post-details h2").each(function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
});

//On window resize
$(window).on("resize", ".post-details h2", function(){
    if($(this).height() > 21)
        $(this).addClass('margintop');
    else
        $(this).removeClass('margintop');
});

Answer 4

I would probably remove the position:absolute; from the <p> tag and let the elements flow naturally. This way you won't have to worry about maintaining any extra javascript.

To get the 20px padding you have at the bottom you could add this style:

.post-details > a, .post-details p { transform: translateY(-20px); }

Answer 5

Replace the following code

$('.post-details h2').each(function(){
  if($(this).height() > 21)
  {
    $(this).css({"margin-top": "315px", "line-height": "28px"});
  }
});

with

$(function(){    
  $('.post-details h2').each(function(){
    if($(this).height() > 21)
    {
      $(this).css({"margin-top": "315px", "line-height": "28px"});
    }
  });
});

Answer 6

I ended up grouping my elements in a single div that I positioned with css only.