Question

var height = $("#mainbody").height();
$("#leftnav").css({"height":height});

$("#leftnav").css({"min-height":height,"padding-bottom":"15px","height":"auto"});

if($.browser.msie && $.browser.version < 7){

    $("#leftnav").css({"height":height});


    $("#leftNavSearch ul li").each(function(){

        if($(this).height() < 20){

            $(this).css({"height":"20px"});

        }else{

            $(this).css({"height":"auto"});

        }

    });     

}else if($.browser.msie && $.browser.version > 7){

    $("#leftnav").css({"height":"auto"});

}

The above function calculates the height of the #mainbody and #leftnav matches it.

However, as you filter through the JSON data on the page, you end up with a lot of white space on the bottom.

What would be the best method to recalculate the height, as the filter links are selected?

Answer 1

First you should include Ben Alman’s great throttle plugin, which we will use limit the rate the resize function gets called.

Next thing we take your script and put it into a function

function resize_left_nav(){
    //YOUR SCRIPT GOES HERE        
}

After this we setup a custom event on the leftnav, which we will trigger to resize the column. We use throttle to limit the rate the resize_left_nav function gets called

$('#leftnav').bind('resize-column',function(){
    $.throttle(250, resize_left_nav);
});

We want to trigger this event on two occasions:

• on page load

  $(function(){ $('#leftnav').trigger('resize-column'); });

• when the item list gets updated. Just tirgger the event, when your filtering has completed.

To clean everything up a bit, we can wrap the whole code in an IIFE (Immediatly invoked function expression) like this:

(function(){
    function resize_left_nav(){ ... }

    $('#leftnav').bind( ... );

    $(function(){ ... });
})();