So, I’ve been working with ‘Frozen’ panes in tables in HTML. The problem is, some of these tables are, well, a little big. Like maybe 100 cells square. I found that the technique mentioned earlier in my blog didn’t work very well, as the scrolling on the DIV tag became slow and jerky.

This makes sense really – each cell is having it’s CSS rerun each time. Then it struck me – the styles were defined as:

td.frozen {
padding: 3px;
position:relative;
top: expression(document.getElementById('pane').scrollTop-2); /*IE5+ only*/
z-index: 5;
}

This mean that ‘getElementById’ was being run repeatedly. However, the style’s JavaScript was being run before ‘onload’. I just couldn’t run the ‘getElementById’ to populate a global variable after the element had been created, but before the style expressions were run. Instead, in a moment of clarity, I changed the style to:

td.frozen {
padding: 3px;
position:relative;
top: expression(getPane().scrollTop-2); /*IE5+ only*/
z-index: 5;
}

And added a script:

var pane;

function getPane() {
if( pane == null ) {
pane = document.getElementById(“pane”);
}
return pane;
}

Thus, we only run getElementByID once – the first time a CSS style’s javascript expression is run. This worked – the DIV tag now scrolls much more quickly, certainly not so as users will notice any lag.