/table_floating_header.js

  1var floating_header = function() {
  2
  3this.header = document.createElement('table');
  4this.header_height = 0;
  5
  6this.getkeys = function(obj) {
  7    var keys = new Array();
  8    for ( var key in obj ) {
  9        keys.push(key);
 10    }
 11    return keys;
 12};
 13
 14this.getXY = function( o ) {
 15    var y = 0;
 16    var x = 0;
 17    while( o != null ) {
 18        y += o.offsetTop;
 19        x += o.offsetLeft;
 20        o = o.offsetParent;
 21    }
 22    return { "x": x, "y": y };
 23}
 24
 25this.setheader = function() {
 26        var win = window.pageYOffset ? window.pageYOffset : 0;
 27        var cel = document.documentElement ? document.documentElement.scrollTop : 0;
 28        var body = document.body ? document.body.scrollTop : 0;
 29        var result = win ? win : 0;
 30        if ( cel && ( ! result || ( result > cel ))) result = cel;
 31        var screenpos = body && ( ! result || ( result > body ) ) ? body : result;
 32        var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height;
 33        if ( screenpos > this.theady && screenpos < theady_max ) {
 34            this.header.style.top=Math.round(screenpos);
 35            this.header.style.display = 'block';
 36            this.header_height = header.offsetHeight;
 37        }
 38        else {
 39            this.header.style.display = 'none';
 40        }
 41}
 42
 43this.addclass = function(obj, newclass) {
 44    if ( obj.classes == null ) {
 45        obj.classes = new Array();
 46    }
 47    obj.classes[newclass] = 1;
 48    obj.className = this.getkeys(obj.classes).join(' ');
 49    return true;
 50};
 51
 52this.theady = 0;
 53
 54this.build_header = function() {
 55    this.table_obj = document.getElementsByTagName('THEAD');
 56    if ( ! this.table_obj ) {
 57        alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen");
 58        return;
 59    }
 60    this.table_obj = this.table_obj[0];
 61    while ( this.table_obj.tagName != 'TABLE' ) {
 62        if ( this.table_obj.tagName == 'BODY' ) {
 63            alert('The THEAD section MUST be inside a table - how did you do that???');
 64            return;
 65        }
 66        this.table_obj = this.table_obj.parentNode;
 67    }
 68
 69    thead = this.table_obj.getElementsByTagName('THEAD')[0].cloneNode(1);
 70    thead.id = 'copyrow';
 71    this.header.style.position='absolute';
 72    this.header.style.display='none';
 73    this.header.appendChild(thead);
 74    this.header.style.width = this.table_obj.offsetWidth;
 75    var srcths = this.table_obj.getElementsByTagName('THEAD')[0].getElementsByTagName('*');
 76    var copyths = thead.getElementsByTagName('*');
 77    for ( var x = 0; x < copyths.length; x++ ) {
 78        copyths[x].className = srcths[x].className;
 79        copyths[x].align = srcths[x].align;
 80        copyths[x].background = srcths[x].background;
 81        copyths[x].bgColor = srcths[x].bgColor;
 82        copyths[x].colSpan = srcths[x].colSpan;
 83        copyths[x].height = srcths[x].height;
 84        copyths[x].rowSpan = srcths[x].rowSpan;
 85        pr = Math.round(srcths[x].style.paddingRight.split('px')[0]);
 86        pl = Math.round(srcths[x].style.paddingLeft.split('px')[0]);
 87        bl = ( Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) : 0;
 88        br = ( Math.round(srcths[x].style.borderRightWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderRightWidth.split('px')[0]) : 0;
 89        pt = Math.round(srcths[x].style.paddingTop.split('px')[0]);
 90        pb = Math.round(srcths[x].style.paddingBottom.split('px')[0]);
 91        bt = Math.round(srcths[x].style.borderTopWidth.split('px')[0]);
 92        bb = Math.round(srcths[x].style.borderBottomWidth.split('px')[0]);
 93        if ( srcths[x].currentStyle ) {
 94            for ( var y in srcths[x].currentStyle ) {
 95                if ( y == 'font' || y == 'top' ) continue;
 96                copyths[x].style[y] = srcths[x].currentStyle[y];
 97            }
 98            pr = Math.round(srcths[x].currentStyle.paddingRight.split('px')[0]);
 99            pl = Math.round(srcths[x].currentStyle.paddingLeft.split('px')[0]);
100            bl = ( Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) : 0;
101            pt = Math.round(srcths[x].currentStyle.paddingTop.split('px')[0]);
102            pb = Math.round(srcths[x].currentStyle.paddingBottom.split('px')[0]);
103            bt = Math.round(srcths[x].currentStyle.borderTopWidth.split('px')[0]);
104        }
105        if ( srcths[x].onclick ) copyths[x].onclick = srcths[x].onclick;
106        var width = ( srcths[x].offsetWidth - pr - pl > 0 ) ? srcths[x].offsetWidth - pr - pl : 0;
107        copyths[x].style.position = srcths[x].style.position;
108        copyths[x].style.top = ( srcths[x].offsetTop - pt - pb > 0 ) ? srcths[x].offsetTop - pt - pb : srcths[x].offsetTop;
109        copyths[x].style.top = srcths[x].style.top;
110        copyths[x].style.height = srcths[x].offsetHeight;
111        copyths[x].style.left = srcths[x].offsetLeft;
112        if ( ! copyths[x].currentStyle ) {
113            //copyths[x].style.width = Math.floor(document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width").split('px')[0]);
114            copyths[x].style.width = document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width");
115        }
116        else {
117            copyths[x].style.width = srcths[x].offsetWidth - pr - pl; // - bl;
118            copyths[x].width = srcths[x].width;
119        }
120        if ( x == copyths.length - 1 ) {
121            this.header.style.paddingBottom = pb;
122            this.header.style.borderBottom = bb;
123        }
124    }
125    this.addclass(this.header, 'main');
126    document.body.appendChild(this.header);
127    theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
128}
129
130var origonload = window.onload;
131window.onload = function() {
132    if (origonload) {
133        origonload();
134    }
135    this.build_header();
136};
137
138window.onscroll=this.setheader;
139
140};
141floating_header();
142