jquery compare the height beneath img to h2's height

Question

I am trying to adapt this:

var h2=$('.block h2');
var divh=$('.block').height();
while ($(h2).outerHeight()>divh) {
    alert('enters while');
    $(h2).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}

as explained here: Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?

The problem I have encountered in my case is that I have various li where each one contains a .block which has a h2 tag per li

Example:

<li>
<div class="block">
....
<h2>Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...
</div>
</li>

<li>
<div class="block">
....
<h2>5Tittleasfasjgpashgj9ahgpasgnapsighapighapsogna</h2>
...

https://i.stack.imgur.com/lI82f.jpg

~~Having .block set with 200px, inside having img set to height: 90px; and a padding: 5px now I need to take the height left beneath img and compare to h2's height.~~

But it doesn't work either, it just doesn't do the if, but divh contains data (200, the 200px set in css).

Edit:

So I just figure out that the best way to fix this is to set a height to h2 tag and than compare its content height with the set one.

You are missing a `(` after the `while`, but I don't know if your code will work exactly if this is all you have as `$h2` isn't defined in this portion. — Tim Withers, Jan 31 '12 at 23:26
try adding alert($(this).outerHeight()) before the if, to verify the value you expect. — creechy, Jan 31 '12 at 23:42
now I get it why it doesn't work... it never returns a value higher than 200. Pfff — Alex, Jan 31 '12 at 23:49

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

Something like this would work fine:

$('.block').each(function (i, el) {
    var $h2 = $(el).find('h2');
    var divh = $(el).height();
    while ($h2.outerHeight() > divh) {
        $h2.text(function (index, text) {
           return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsFiddle Demo

You should use .block { word-wrap: break-word; } (or put some spaces into those long h2 texts) to let them break and help the effect happen.

As I also stated in the original question, this is just an idea, not something ready to be used in production. It is quite DOM-heavy and may not be the best solution for all use cases.

edited May 23 '17 at 11:55

Community

1
1

answered Jan 31 '12 at 23:43

kapa

77,694
21
158
175

the problem is that `.block` is set to 200px height and h2 returns at most 60 so I have to reduce the 200 with the image height and what is left if bigger than it than do the replacing, right? – Alex Jan 31 '12 at 23:51
can you suggest any better solution? – Alex Jan 31 '12 at 23:52
@w0rldart The problem is that I don't really understand the problem :). Could you illustrate it with a jsFiddle? The idea depends on a wrapper (`#fos` in the original) around the element (`p` in the original). The only job of the wrapper should be to include the element and define its height. – kapa Jan 31 '12 at 23:54
@w0rldart I did not really have a chance to see your code and what you want to achieve exactly, but I'm happy you've solved it. You should answer your question, describe your solution and accept it. – kapa Feb 01 '12 at 00:28
will do @bazmegakapa... Thank you for your help also – Alex Feb 01 '12 at 00:32

aowie1 · Answer 2 · 2012-01-31T23:57:31.013

0

First of all, you're regex only works for space separated words. Long strings like you have won't be shortened.

Secondly, you dont need to use another selector on your h2 var in the while condition.

Thirdly, the .each is definitely required.

var h2=$('.block h2');
h2.each(function(){
    var divh=$(this).closest('.block').height();
    while ($(this).outerHeight()>divh) {
        $(h2).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});

jsfiddle link

edited Jan 31 '12 at 23:57

answered Jan 31 '12 at 23:50

aowie1

836
8
21

This will use the height of the first block for all elements, which is wrong. – kapa Jan 31 '12 at 23:52

score -1 · Answer 3 · answered Jan 31 '12 at 23:29

-1

I think you may have a couple of problems, first you have a typo on the "while" line where I think you really want to do

while ($('h2').outerHeight()>divh) {

But really I think you want to use the .each() jquery method, something like

$('h2').each(function(i) {
  if ($(this).outerHeight() > divh) {
    //...
  }
});

answered Jan 31 '12 at 23:29

creechy

405
2
3

Using `each` there totally breaks the logic itself :). – kapa Jan 31 '12 at 23:47
how's that? he want's to iterate over the h2 tags, the .each() will do that, no? Yes, I do see that there should be an outer loop to get the height of each .block. – creechy Jan 31 '12 at 23:55
@creechy He needs to iterate with `each()` in this scenario, but the `while` should remain in place because it is the heart of the solution. – kapa Feb 01 '12 at 00:01

jquery compare the height beneath img to h2's height

3 Answers3

Linked