/table_floating_header.js
JavaScript | 142 lines | 129 code | 12 blank | 1 comment | 30 complexity | 17263a2024b1de8967f0931fc7c65406 MD5 | raw file
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