jQuery dynamically set incremented height to elements

Question

What I want to achieve:

for each ul.container -> find the greatest li height -> add 25px to it -> apply that new height to all li within the container.

I need the calculation to happen also on window resize.

The problem:

While this works at page load, when resizing the browser window, the height keeps incrementing by 25px at every loop. I can't seem to figure out what I am doing wrong.

My code:

function listHeight() {

    $("ul.container").each(function () {

        var listHeight = 0;
        var newHeight = 0;

        $("li", this).each(function () {

            newHeight = $(this).height();

            if (newHeight > listHeight) {

                listHeight = newHeight;
            }
        });

        $("li", this).height(listHeight += 25);
    });
}

listHeight();

$(window).resize(function () {
    listHeight();
});

JSFiddle: http://jsfiddle.net/upsidown/VtypM/

Thanks in advance!

You have done it once on page load (i.e. set the height of all list elements to x). What's the point of doing it all again when the window is resized? - The height of all items are already x and then you just keep adding 25! — , May 26 '14 at 10:40
@StephenMuecke because I need different calculations for responsive purposes. I am resetting everything to zero before calculating again. — MrUpsidown, May 26 '14 at 10:43
yes @MrUpsidown you are resetting variables but "Li"'s physical height is increasing continuously. see my answer below it will solve your problem — Jeetendra Chauhan, May 26 '14 at 10:49
No you're not. Look at your code again. On the first time (load) the height of all items is say 50. The next time your getting the maximum height (the loop is pointless since they are all 50) and then adding 25 - it will just keep growing infinitely. — , May 26 '14 at 10:50
@StephenMuecke Right. I was resetting the variables but not the elements height, which was the issue here (not the resize). — MrUpsidown, May 26 '14 at 10:55

score 1 · Accepted Answer · answered May 26 '14 at 10:44

The height increases because you set the height in the first run. After that the height remains the "max hight" + 25 and adds additional 25 to it. To prevent that just reset the height of the element to auto.

function listHeight() {
    $("ul.container").each(function () {
        var listHeight = 0;
        var newHeight = 0;

        $("li", this).each(function () {
            var el = $(this);
            el.css('height', 'auto');
            newHeight = el.height();

            if (newHeight > listHeight) {
                listHeight = newHeight;
            }
        });

        $("li", this).height(listHeight += 25);
    });
}

listHeight();

$(window).resize(function () {
    listHeight();
});

For better performance I suggest that you debounce/throttle the function call.

score 1 · Answer 2 · answered May 26 '14 at 10:45

1

you need to add

$("li", this).height("auto");

after

var listHeight = 0;
var newHeight = 0;

view Demo

answered May 26 '14 at 10:45

Jeetendra Chauhan

1,977
2
15
21

Good catch! I knew I was just missing something :-) – MrUpsidown May 26 '14 at 10:49

score -1 · Answer 3 · edited May 23 '17 at 12:27

-1

I think you need to look at this thread. jQuery - how to wait for the 'end' of 'resize' event and only then perform an action?

You need to call it at the end of the resize event.

Hope it helps!

edited May 23 '17 at 12:27

Community

1
1

answered May 26 '14 at 10:39

Joery Vreijsen

48
1
6

score -1 · Answer 4 · answered May 26 '14 at 10:42

-1

You need to increment height only if newHeight > listHeight, I think.

answered May 26 '14 at 10:42

GrigTheFirst

37
8

jQuery dynamically set incremented height to elements

4 Answers4