CODEWITHSUNDEEP
jquerywindow-resize
Nicole McCoy
Nicole McCoy

Reputation: 358

jQuery window resize function only calls once

Basically I have an unordered list with images. I'm using jquery to make sure that all the li tags take up the same amount of vertical space. However, my site is fluid and I want my jquery to resize the li tags when the page loads and also when the browser window resizes. I used the following solution which, I believe, should work and after reading other threads that are doing similar things with success I don't understand why my code is not firing on window resize.

Here's the site where you can see that the li tags do not resize with the page (unless you refresh): http://www.webedify.com/sse/type.html

My HTML:

<ul class="img-results">
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
 </ul>

My jQuery: 

var imght = function () {
        var maxHeight = -1;
        $('ul.img-results li').each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        $('ul.img-results li').each(function() {
            $(this).height(maxHeight);
        });
    };

    $(document).ready(imght);
    $(window).resize(imght);

What am I missing? I feel like it's something small and possibly obvious, I'm just not seeing it. Thanks for any help.

Upvotes: 1

Views: 989

Answers (1)

Robert McKee
Robert McKee

Reputation: 21487

The problem is that once you specify the height, the browser resizing will no longer change the height. The height will remain the height you specified. Remove your old height before trying to find what the new height should be.

var imght = function () {
        var maxHeight = -1;
        var uls=$('ul.img-results li');
        uls.css({'height':'auto'});
        uls.each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        uls.each(function() {
            $(this).height(maxHeight);
        });
    };

Upvotes: 1

Related Questions