Jquery function called from $(document).ready takes too long - IE pops up “stop running script” dialog

Question

I have the following script to mimic "freezepane" functionality in html, like in excel, where the right side and the header are both scrolled when the user scrolls the results table.

fnAdjustTable=function(){

    var colCount=$('#firstTr>td').length; //get total number of column

    var m=0;
    var n=0;
    var brow='mozilla';
    jQuery.each(jQuery.browser, function(i, val) {
        if(val==true){

            brow=i.toString();
        }
    });
    $('.tableHeader').each(function(i){
        if(m<colCount){

            if(brow=='mozilla'){
                $('#firstTd').css("width",$('.tableFirstCol').innerWidth());//for adjusting first td

                $(this).css('width',$('#table_div td:eq('+m+')').innerWidth());//for assigning width to table Header div
            }
            else if(brow=='msie'){
                $('#firstTd').css("width",$('.tableFirstCol').width());

                $(this).css('width',$('#table_div td:eq('+m+')').width());//In IE there is difference of 2 px
            }
        }
        m++;
    });

    $('.tableFirstCol').each(function(i){
        if(brow=='mozilla'){
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').outerHeight()-1);//for providing height using scrollable table column height
        }else if(brow=='msie'){

            $(this).css('height',$('#table_div td:eq('+colCount*n+')').innerHeight());
        }else{
            $(this).css('height',$('#table_div td:eq('+colCount*n+')').height());
        }
        n++;
    });



}

fnScroll=function(){

    $('#divHeader').scrollLeft($('#table_div').scrollLeft());
    $('#firstcol').scrollTop($('#table_div').scrollTop());
}

The problem is that when iterating through the "tableFirstCol" tds, the error to stop running the script pops up. Is there some more efficient way to do this?

Essentially the script is resizing each top header and side pane to match the width in the first row/column. If I run my report with a large date range (the side header), the script pops up, usually when there are about more than 30 side header rows.

Any help appreciated!

Answer 1

You could generate the HTML with id tags for each column and row. Then just select by the name instead of using the complicated selectors.

I would say that $('#table_div td:eq('+colCount*n+')') is a complicated selector, while $('#row1') is much easier.

Also - I believe what you are doing for a browser check will not work. The code you have iterates through all properties for the detected browser and sets the brow value to the last one. Instead of the loop you have, use something like $.browser.webkit to check for webkit and $.browser.msie to check for IE. As your code is now, I think you will always be executing the else case. See here for more on the jQuery browser object: http://api.jquery.com/jQuery.browser/

Answer 2

You need to cache your selectors:

var tableDiv = $('#table_div'),
    divHeader = $('#divHeader'),
    firstcol = $('#firstcol'),
    tableFirstCol = $('.tableFirstCol'),
    tds = $('td', tableDiv);

You can use for your column selectors .eq(n).

Don't use $(this).css("height", n) when this.style.height = n ; is easier and faster.

This:

$('.tableHeader').each(function(i){
    if(m<colCount){
        /* ... */
    }
    m++;
});

should be:

$('.tableHeader').each(function(i){
    if(i<colCount){
        /* ... */
    }
});

and I'm not entirely sure you would even need the i<colCount check (but I'd have to see the HTML).

The browser sniffing is probably not necessary. Try applying a reset stylesheet and a valid doctype or use HTML5Boilerplate .

If you HAVE to browser sniff: you could just use:

if($.browser.mozilla){
    /* ... */
}
else if ($.browser.msie){
    /* ... */
}
else{
    /* ... */
}

You could also condense that code down quite a lot. Look up the DRY principle .

Also, as for setting the height of the tableFirstCol , couldn't you just set the height of the row instead?