0

I have some jquery that runs like nothing in chrome but IE keeps choking on it. I have a table with some static columns that are static by absolute positioning. I want to make sure they expand vertically with their parent row, so I have this code to expand them. It works, but it takes FOREVER in IE. What can I change to improve performance in IE?

    $("#grdSchedule tr").each(function(i){
        $(this).find(".stickyCol").height($(this).height());
    });

EDIT: .height() is the problem

This is what I have tried so far but it hasnt helped much at all. 

    var stickyCols = GetStickyColumnCount();

    $("#grdSchedule > tbody > tr").each(function(i) {
        thisRow = $(this);
        thisRow.children().slice(0, stickyCols).height(thisRow.height());
        //thisRow.children(".stickyCol").height(thisRow.height());
    });

It seems that calling height() every time is whats dragging it down in IE. I am going to make a new question for maybe some css help so i dont need to run this script in the first place. But if anyone can add anything for speeding this up in IE it would be awesome!!

in case anyone is wondering, for my big ugly grid of production data, chrome is running this in like 2.5 seconds, where IE takes like 20 seconds.

I think maybe I should try and address this with css and not javascript

jumpdart
  • 1,702
  • 16
  • 35
  • going to try a standard javascript loop, but i hate having all the extra code on my page – jumpdart Jan 17 '13 at 12:14
  • 1
    If `.stickyCol` is a direct children then use `.children()` instead. And, cache `$(this)`. Also you should put up together an example [fiddle](http://jsfiddle.net/), anyways this kind of browser dependent optimization is better to try them out. So far, the size of your data is unknown for us. I could have a `` with a million rows or one with 2 rows only
     – Alexander Jan 17 '13 at 12:14
  • yeah the data for this table is crazy and would take a while to make a relevant fiddle. imagine a schedule with a bunch of sticky employee columns to the left and a bunch of crazy schedule details html in each cell to the right, where each non sticky column is a date. oh yeah and hundreds of employees... so a big table full of lots of elements. If the suggested solutions dont fix me up, ill make a fiddle later today – jumpdart Jan 17 '13 at 12:23
  • its the height! the nested query with setting the height just does not play well with IE... Its not the finding the elements thats the problem... I guess I might need to make a new question – jumpdart Jan 17 '13 at 13:18
  • 1
    have you considered using the $.css(); method instead of $.height()? I don't know but it could be faster. something like: `thisRow.find(stickyCols).css('height', thisRow.css('height'));`. edit: also, `$.find()` can be quite fast rather than using children or slice (some interesting metrics here: http://stackoverflow.com/a/8434662/846480 ) – totallyNotLizards Jan 17 '13 at 13:43
  • better question http://stackoverflow.com/questions/14403064/heightitem-height-jquery-too-slow-in-ie-alternatives – jumpdart Jan 18 '13 at 17:27

1 Answers1

1

Try this,

$("#grdSchedule tr .stickyCol").height(function(i,height){
    return $(this).closest('tr').height();
});
Adil
  • 146,340
  • 25
  • 209
  • 204