Hello.
First of all, great effort for coming up with this useful piece of code.
I have used the code as per
http://fabrikar.com/forums/index.php?wiki/list-javascript/
My tables span two “screens” horizontally wise, meaning that I also need to be able to do left-right scrolls together with vertical scrolls, to obverse all the listed information, with the associated list column names.
The code behaves as expected when I do vertical scrolls, but it does not work when I do left-right scrolls. To be more precise, once I do a vertical scroll and I want to move to the horizontal “off-screen” section of my table to the right, the “hovering” list header does not follow the screen scroll but is frozen to the position of the last vertical scroll. I have to move at the top of the list, make my horizontal scroll to the right and then make a vertical scroll to arrive to the table section of interest, that was previously off screen, with the correct column names appearing in the header.
I looked at the code listed in the above wikki and I have a feeling that the “/* detach/attach table header */” section of the code, takes care the vertical scroll once it happens by creating a hovering header, but after that it does not consider any horizontal scrolls. By adding the following else statement after the first nested “if” of the “/* detach/attach table header */” section, as shown bellow, the problem is solved and I have a hovering header that responds to both vertical and horizontal scrolls.
Please confirm / refine, because I am javascript illiterate and I hope that haven't waisted your time with my js ignorance.
JavaScript:
/* detach/attach table header */
if(tgBodyTop > window.tableFromTop) {
if(jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").length==0){
var temphead = jQuery("table#list_40_com_fabrik_40 thead").clone();
jQuery(temphead).prop('id','temphead');
/* Create fixed header */
var tableclasses = document.getElementById("list_40_com_fabrik_40").className;
/* The z-index may have to be set higher if the fixed header is not 'on top' */
jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer").prepend('<table class="'+tableclasses+' temptable" style="width:'+window.tablewidth+'px;z-index:1"><thead>'+jQuery(temphead).html()+'</thead></table>');
/* Note: Set the "top:" fixed position for table header in function setHeaders() */
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
}
/************Proposed code. Takes care of the horizontal scrolling ************************************/
else
{
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
}
/*******************************************************************************************************************/
}else{
if(jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").length){
jQuery("#listform_40_com_fabrik_40 div.fabrikDataContainer table.temptable").remove();
}
}