Posted By


chrisf on 11/03/10

Tagged


Statistics


Viewed 236 times
Favorited by 1 user(s)

xTableHeaderFixed


/ Published in: JavaScript
Save to your folder(s)

Some minor changes to xTableHeaderFixed from http://cross-browser.com/x/lib/view.php?s=xTableHeaderFixed


Copy this code and paste it in your HTML
  1. // xTableHeaderFixed r10, Copyright 2006-2010 Michael Foster (Cross-Browser.com)
  2. // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
  3.  
  4. var xIE8Up; // yuck!
  5. /*@cc_on
  6. @if (@_jscript_version > 5.7)
  7.   xIE8Up = true;
  8. @end
  9. @*/
  10.  
  11. var xGecko = window.navigator.product == 'Gecko'; // yuckier!
  12.  
  13. function xTableHeaderFixed(tclass, tcon, w, yofs) {
  14. // Public Methods
  15. this.init = function(tclass, tcon, w, yofs) {
  16. _dtor();
  17. return _ctor(tclass, tcon, w, yofs);
  18. };
  19. this.paint = function() {
  20. _event({ type: 'resize' });
  21. };
  22. // Constructor Code
  23. var _i = this, con, tbl, win, cbl = 0, cbt = 0, fp = true, yo = 0,
  24. fc = 'xthf-fix-tbl', ac = 'xthf-abs-tbl'; // private properties
  25. if (tclass) { _ctor(tclass, tcon, w, yofs); }
  26. // Private Methods
  27. function _ctor(tclass, tcon, w, yofs) {
  28. var i, h, t;
  29. tbl = xGetElementsByClassName(tclass, document, 'table');
  30. con = xGetElementById(tcon);
  31. if (!tbl || !tbl.length || !con) { return false; }
  32. if (!(win = w)) { con.scrollTop = 0; }
  33. // Create a header table for each table with tclass.
  34. for (i = 0; i < tbl.length; ++i) {
  35. h = tbl[i].tHead;
  36. if (h) {
  37. t = document.createElement('table');
  38. // EDIT - setting these styles explicitly - removes the need to have .css file (unless we are printing)
  39. t.className = tclass + ' ' + (w ? fc : ac);
  40. t.style.top = 0;
  41. t.style.position = (w ? "fixed" : "absolute");
  42.  
  43. if (tbl[i].cellSpacing !== '') { t.cellSpacing = tbl[i].cellSpacing; }
  44. t.appendChild(h.cloneNode(true));
  45. t.id = tbl[i].xthfHdrTblId = 'xthf-' + tclass + '-' + i;
  46. if (typeof yofs != 'undefined') {
  47. yo = yofs;
  48. if (yo === 0) { //
  49. t.style.top = xPageY(tbl[i]) + 'px'; // r10
  50. } //
  51. else {
  52. t.style.top = yo + 'px';
  53. }
  54. }
  55. document.body.appendChild(t);
  56. }
  57. else {
  58. tbl[i] = null;
  59. }
  60. }
  61. // begin DEBUG
  62. if (!w && !xIE8Up && !window.opera) {
  63. cbl = xGetComputedStyle(con, 'border-left-width', true),
  64. cbt = xGetComputedStyle(con, 'border-top-width', true);
  65. }
  66. // end DEBUG
  67. _event({ type: 'resize' });
  68. xAddEventListener(con, 'scroll', _event, false);
  69. xAddEventListener(window, 'resize', _event, false);
  70. xAddEventListener(window, 'unload', _dtor, false);
  71. return true;
  72. }
  73. function _dtor() {
  74. var i, ht;
  75. if (con) {
  76. xRemoveEventListener(con, 'scroll', _event);
  77. xRemoveEventListener(window, 'resize', _event);
  78. xRemoveEventListener(window, 'unload', _dtor);
  79. // Remove the header tables from the DOM.
  80. for (i = 0; i < tbl.length; ++i) {
  81. ht = xGetElementById(tbl[i].xthfHdrTblId);
  82. if (ht) { document.body.removeChild(ht); }
  83. tbl[i] = null;
  84. }
  85. tbl = null;
  86. con = null;
  87. }
  88. }
  89. function _event(e) // handles scroll and resize events
  90. {
  91. var i, r;
  92. e = e || window.event;
  93. r = e.type == 'resize';
  94. for (i = 0; i < tbl.length; ++i) {
  95. _paint(tbl[i], r);
  96. }
  97. }
  98. function _paint(t, r) {
  99. var i, ht, c1, c2, st, ty, thy, w, sep;
  100. if (!t) { return; }
  101. ht = xGetElementById(t.xthfHdrTblId);
  102. // Hide or show the header table.
  103. st = xScrollTop(con, win) + (yo || 0);
  104. if (win) { ty = xPageY(t); }
  105. else { ty = t.offsetTop; }
  106. thy = ty + t.rows[0].offsetTop;
  107. if (yo !== 0 && (st <= thy || st > ty + t.offsetHeight - ht.offsetHeight)) {
  108. ht.style.left = '-2000%'; // hide it //EDIT - previously was "-2000px" my VDUs are getting bigger! Mine is 1920x1200 and when I expanded across 2 screens I would see the "hidden" table.
  109. fp = true; // first-paint after being hidden
  110. return;
  111. }
  112. // Position the header table.
  113. ht.style.left = (xPageX(t) - xScrollLeft(con, win) + cbl) + 'px';
  114. if (!win) { ht.style.top = (xPageY(con) + cbt) + 'px'; }
  115. if (fp || r) {
  116. // Resize the header table THs.
  117. c1 = xGetElementsByTagName('th', t.tHead);
  118. c2 = xGetElementsByTagName('th', ht.tHead);
  119. for (i = 0; i < c1.length; ++i) {
  120. w = c1[i].offsetWidth;
  121. xTableHeaderFixed.xWidth(c2[i], w);
  122. }
  123. fp = false;
  124.  
  125. //EDIT - Set the width of the header explicitly
  126. try {
  127. w = t.offsetWidth;
  128. xTableHeaderFixed.xWidth(ht, w);
  129. }
  130. catch (exception) {
  131. alert(exception);
  132. }
  133. }
  134. }
  135. } // end xTableHeaderFixed
  136.  
  137. // xWidth r8?, Copyright 2001-2010 Michael Foster (Cross-Browser.com)
  138. // Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
  139. // This function is currently experimental and used only by xTableHeaderFixed.
  140. xTableHeaderFixed.xWidth = function(e, w) {
  141. var pl = 0, pr = 0, b = 0, gcs;
  142. if (!(e = xGetElementById(e))) return false;
  143. if (xNum(w)) {
  144. if (w < 0) w = 0; // return false ???
  145. else w = Math.round(w);
  146. }
  147. else w = -1;
  148. if (xDef(e.style, e.offsetWidth, e.clientWidth)) {
  149. if (w >= 0) {
  150. if (document.compatMode == 'CSS1Compat') {
  151. gcs = xGetComputedStyle;
  152. pl = gcs(e, 'padding-left', 1);
  153. pr = gcs(e, 'padding-right', 1);
  154. b = e.offsetWidth - e.clientWidth;
  155. if (window.opera && e.tagName.toLowerCase() != 'table') {
  156. b = Math.round(b / 2); // possibly only for TDs and THs !!! haven't yet finished testing in Opera !!!
  157. }
  158. w -= (pl + pr + b);
  159. if (isNaN(w) || w < 0) return false;
  160. }
  161. e.style.width = w + 'px';
  162. }
  163. w = e.offsetWidth;
  164. }
  165. else {
  166. return false;
  167. }
  168. return w;
  169. };
  170.  
  171. /* DEBUG
  172. sep = xGetComputedStyle(t, 'border-collapse') == 'separate';/////////////////
  173. for (i = 0; i < c1.length; ++i) {
  174. /////// testing something for table 3 ///////
  175. w = c1[i].offsetWidth;
  176. //if ((xGecko || xIE8Up) && c1[i].colSpan > 1) {
  177. if (xGecko && (win || sep) && c1[i].colSpan > 1) {
  178. --w; // ???????????????
  179. }
  180. xTableHeaderFixed.xWidth(c2[i], w);
  181. }
  182. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.