// ===================================================================================
// jQuery plugin --- holdHeadings
// Purpose : Stops headings of long tables falling off the top of the screen
// HTML :
must have and sections
// Script : $(selector).holdHeadings(options);
// CSS : optional THEAD.hh_held for adapting style of heading when held
// Options : {zIndex:10, // hovers on layer 10 by default
// boxShadow : "0px 7px 10px #fff", // a white shadow fading the table under the heading
// borderBottom : "2px dotted #555", // alert to more scrolled above
// jumpToTop : true} // do we implement click on head to jump to top?
// Home : http://vulpeculox.net/misc/jsjq/headHolder
// Author : Peter Fox
// Version : 18 Aug 2013
// ===================================================================================
(function($){
$.fn.holdHeadings = function(Options){
// === COLLECT ANY OPTIONS ===
var settings = $.extend({
zIndex: "10", // hovers on layer 10 by default
boxShadow : "0px 7px 10px #fff", // a white shadow fading the table under the heading
borderBottom : "2px dotted #555", // alert to more scrolled above
jumpToTop : true // do we implement click on head to jump to top?
},Options);
// === DO THE ONCE-OFF SETUP ===
var tables = this.filter('table'); // this is what we'll be working on
//—————————————————————————————————————————————————————————————————
// For each table selected read vital data and clone THEAD
// (We use a clone of the THEAD rather than simply changing the CSS
// of the THEAD because in some situations tables get resized
// when this happens even though we've tried to tell the browser
// not to.)
//—————————————————————————————————————————————————————————————————
var _Initialise = function(){
tables.each(function(I,T){ // prepare each one
var tbl = $(this);
_EraseHead(tbl);
var params = {}; // Object to hold table-specific data
params.tableTop = tbl.offset().top; // Where is top of table
params.tableBot = params.tableTop + tbl.height(); // and the bottom
params.tableLeft = tbl.offset().left; // Where is left edge of table
var t = tbl.clone();
var h = t.children('thead').first(); // This bit will be CLONED then 'floated away' from the table
h.css('width',h.width()+'px'); // fix the overall width
//t.css('width',t.width()+'px'); // fix the overall width
// The next issue is that when we detach the heading from the table the table layout algorithms
// will recalculate the widths. We have to read the column widths from the full table then use
// those to explicitly set the widths of the column headings.
var tbody = tbl.children('tbody').first();
var td1 = tbody.find('td:first-child').first(); // the first TD in the table (NB previous rows may have THs hence this method)
var tr1 = td1.parent(); // First TR with TDs
var bodytds = tr1.children(); // All the TDs in the first 'TD' row
var trx = h.find('tr:last-child'); // last row in the heading
var headtds = trx.children(); // TDs or THs
for(var i=0;i params.tableTop) && ((wst + params.headHeight) < params.tableBot);
if(showIt){ // repeated calls are ignored
_ShowHead(tbl);
var wsl = $(window).scrollLeft();
var l = params.tableLeft - wsl;
params.thead.css('left',l+'px');
}else{
_HideHead(tbl);
}
});
}
//—————————————————————————————————————————————————————————————————
// First time set-up and assign a scroll event handler
//—————————————————————————————————————————————————————————————————
_Initialise();
$(window).scroll(function(){_PositionCheck();});
$(window).resize(function(){_Initialise();});
return this;
}
}( jQuery ));