CODEWITHSUNDEEP
javascriptjquerywindow-resize
Rich
Rich

Reputation: 1156

Equal Height Columns that Recalculate on Window Resize

The code I have below is supposed to find the height of the largest column (.border) and adjust the height of any other columns found within the .container div to equal it. Unfortunately, I haven't been able to get this code to work as intended so I'm hoping someone wiser than I could can help me out.

It's also worth mentioning that column height should be recalculated and columns resized respectively whenever the window has been resized. 

<script type="text/javascript">
    $(document).ready(function(){
        //Bind the window onresize event
        $(window).bind('resize', resizeWindow);

        //Call resizeWindow() function immediately to intiially set elements
        resizeWindow();
    });

    function resizeWindow(){
        //Find all the container parent objects
        $('.container').each(function(){
            //Initialize the height variable
            var maxHeight = 0;

            //Cache the jQuery object for faster DOM access and performance
            var $borders = $(this).find('.border');

            //Find all the border child elements within this specific container
            $borders.each(function(){
                //Get current element's height
                var thisHeight = $(this).height();

                //Check if the current height is greater than the max height thus far
                //If so, change max height to this height
                if (thisHeight>maxHeight) maxHeight = thisHeight;
            });

            //Now that we have the maximum height of the elements,
            //set that height for all the .border child elements inside the parent element
            $borders.height(maxHeight);
        });
    }
</script>


<div class="container">
    <a href="#" class="border">
        <div class="column">
            <div class="content">asdf</div>
        </div>
    </a>
    <a href="#" class="border">
        <div class="column">
            <div class="content">asdf</div>
        </div>
    </a>
</div>

Upvotes: 0

Views: 3849

Answers (3)

Peeyush
Peeyush

Reputation: 4828

I think you should provide an height to your DIV not the <a>.

Try this fiddle:

http://jsfiddle.net/ddFtX/1/

Upvotes: 0

zamnuts
zamnuts

Reputation: 9592

Use the jQuery equalHeights plugin:

http://www.cssnewbie.com/equalheights-jquery-plugin

$('.container .border').equalHeights(); // make all .border the same height
$(window).resize(function(){$('.container .border').equalHeights();});

See: http://jsfiddle.net/rZU35/

Upvotes: 1

insertusernamehere
insertusernamehere

Reputation: 23590

This is not exactly a solution to your JavaScript problem. This is a CSS solution, that doesn't need any JavaScript. Using those styles with your markup, both columns will always have the same height:

div.container {
    display: table;
    width: 100px;
}

div.container > a {
    display: table-cell;
    border: 1px solid red;
}

Demo

http://jsfiddle.net/wmbcr/

This will work upon resize too, if no fixed width is set.

Upvotes: 0

Related Questions