CoolTool Script API Tutorial : Freezing column captions in «Matrix» questions

In the previous article we showed you how to duplicate the column captions inside matrix body. Here we will have a look at another way of handling with extensive tables. We will lock the column caption in some fixed position at the top of our survey.

Besides, we will apply a more vivid style to the column captions in order to distinguish them among other matrix cells.

Scroll down the survey in the proposed example and see how it works.

In order to reproduce this example, please undertake the following steps:

Create "Single matrix answer" question with a lot of rows. Launch the Script Editor and insert the following script into "OnRender script" tab (see the image below):

var widths = new Array();
$('.survey-matrix-question td').each(function( index ) {
var elementWidth = $( this ).outerWidth();
widths[index] = elementWidth;
});
var s = $('.survey-matrix-question tr:first');
s.css("background-color","BackColor");
s.css("color","Color");
var top = s.offset().top;
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= top) {
s.css("position", "fixed");
s.css("top", "0px");
} else {
s.css("position", "static");
}
$( '.survey-matrix-question td').each(function( index ) {
var elWidth = widths[index];
elWidth = elWidth+"px";
$(this).outerWidth(elWidth);
});
});

After that modify the tokens highlighted in red as described in the table below:

BackColor	Background color of the column captions. You can type in the color names (like "green", or "black") or the "hex" codes (e.g. #ccccff)
Color	Color of the text in column captions