').css({ visibility: 'hidden', width: '50px', height:'50px', overflow: 'scroll' }).appendTo('body');
25 | var scrollbarpx = 50 - $('
').height(99).appendTo(dummy).outerWidth();
26 | dummy.remove();
27 |
28 | //IE8 browser test (because it's bad)
29 | var rv = -1;
30 | var ua = navigator.userAgent;
31 | var re = new RegExp("Trident\/([0-9]{1,}[\.0-9]{0,})");
32 | if (re.exec(ua) != null) {
33 | rv = parseFloat(RegExp.$1);
34 | }
35 | var ie8 = (rv == 4);
36 |
37 | this.each(function () {
38 | var self = $(this);
39 | var parent = self.parent();
40 | var prevParentWidth = parent.width();
41 | var divWidth = parseInt(o.width ? o.width : parent.width());
42 | var divHeight = parseInt(o.height ? o.height : parent.height());
43 |
44 |
45 | //bypass if table size smaller than given dimesions
46 | if (self.width() <= divWidth && self.height() <= divHeight)
47 | return;
48 |
49 | var width = self.width();
50 | self.width(width); //reinforce table width so it doesn't change dynamically
51 |
52 | //Create outer div
53 | var outerdiv = $(document.createElement('div'));
54 | outerdiv.css({ 'overflow': 'hidden' }).width(divWidth).height(divHeight);
55 |
56 | //Create header div
57 | var headerdiv = $(document.createElement('div'));
58 | headerdiv.css({ 'overflow': 'hidden', 'position': 'relative' }).width(divWidth);
59 | if (o.headerCss)
60 | headerdiv.addClass(o.headerCss);
61 |
62 | //Create header clone
63 | var cloneTable = self.clone();
64 | cloneTable.find('tbody').remove();
65 | cloneTable.find('tfoot').remove();
66 |
67 | //Create footer clone
68 | var cloneFoot = self.clone();
69 | cloneFoot.find('tbody').remove();
70 | cloneFoot.find('thead').remove();
71 |
72 | var headBgColor = null;
73 | //Set header/footer column widths and click events
74 | self.find('thead').find('th').each(function(index, value) {
75 | var val = $(value);
76 | var tdwidth = val.width();
77 | if (headBgColor == null) {
78 | if (o.backgroundcolor == null)
79 | headBgColor = val.bkgcolor();
80 | else
81 | headBgColor = o.backgroundcolor;
82 | }
83 | if (headBgColor == "rgba(0, 0, 0, 0)" || headBgColor == "transparent")
84 | headBgColor = "#fff";
85 |
86 | val.css("width", tdwidth + 'px'); //reinforce width
87 | $(cloneTable.find('th')[index]).click(function() { val.click(); });
88 | $(cloneTable.find('th')[index]).width(tdwidth);
89 | $(cloneFoot.find('th')[index]).click(function () { val.click(); });
90 | $(cloneFoot.find('td')[index]).width(tdwidth);
91 | });
92 |
93 | //Create footer div
94 | var footerdiv = $(document.createElement('div'));
95 | footerdiv.css({ 'overflow': 'hidden', 'position': 'relative', 'background-color': headBgColor }).width(divWidth);
96 |
97 | cloneTable.css({ 'table-layout': 'fixed', 'background-color': headBgColor });
98 | cloneFoot.css({ 'table-layout': 'fixed', 'background-color': headBgColor });
99 | self.css({ 'table-layout': 'fixed' });
100 |
101 | //Create body div
102 | var bodydiv = $(document.createElement('div'));
103 |
104 | //Add horizontal scroll event
105 | bodydiv.scroll(function () {
106 | headerdiv.scrollLeft(bodydiv.scrollLeft());
107 | footerdiv.scrollLeft(bodydiv.scrollLeft());
108 | });
109 |
110 | //Add to DOM
111 | headerdiv.append(cloneTable);
112 | footerdiv.append(cloneFoot);
113 | self.before(outerdiv);
114 | self.appendTo(bodydiv);
115 | outerdiv.append(headerdiv);
116 | outerdiv.append(bodydiv);
117 | outerdiv.append(footerdiv);
118 |
119 | //Adjust header and footer div width if vertical scrollbar present
120 | var combinedHeight = self.height() + headerdiv.height() + footerdiv.height();
121 | if (combinedHeight >= divHeight) {
122 | headerdiv.width(headerdiv.width() - scrollbarpx);
123 | footerdiv.width(footerdiv.width() - scrollbarpx);
124 | }
125 |
126 | //Set body height after other content added to parent
127 | var marginTop = parseFloat(bodydiv.css("margin-top"));
128 | marginTop -= headerdiv.height();
129 | var marginBottom = parseFloat(bodydiv.css("margin-bottom"));
130 | marginBottom -= footerdiv.height();
131 | if (self.width() + scrollbarpx >= divWidth)
132 | marginBottom -= scrollbarpx;
133 | bodydiv.css({ 'overflow': 'auto', 'margin-top': marginTop + 'px', 'margin-bottom': marginBottom + 'px' }).width(divWidth).height(divHeight - scrollbarpx);
134 |
135 | if (ie8)
136 | self.find('thead').hide();
137 |
138 | //Add reactive resizing
139 | if (o.reactive) {
140 | $(window).resize(function () {
141 | if (prevParentWidth != parent.width()) {
142 | var newWidth = parent.width();
143 | if (o.width && newWidth > o.width)
144 | return;
145 | outerdiv.css({ 'overflow': 'hidden' }).width(newWidth).height(divHeight);
146 | headerdiv.css({ 'overflow': 'hidden', 'position': 'relative' }).width(newWidth - scrollbarpx);
147 | bodydiv.css({ 'overflow': 'auto', 'margin-top': marginTop + 'px', 'margin-bottom': marginBottom + 'px' }).width(newWidth).height(divHeight - scrollbarpx);
148 | footerdiv.css({ 'overflow': 'hidden', 'position': 'relative', 'background-color': headBgColor }).width(newWidth - scrollbarpx);
149 | prevParentWidth = newWidth;
150 | }
151 | });
152 | }
153 |
154 | });
155 | };
156 | })(jQuery);
157 |
158 |
159 | (function($) {
160 | // Get this browser's take on no fill
161 | // Must be appended else Chrome etc return 'initial'
162 | var $temp = $('
').appendTo('body');
163 | var transparent = $temp.css('backgroundColor');
164 | $temp.remove();
165 |
166 | jQuery.fn.bkgcolor = function( fallback ) {
167 | function test( $elem ) {
168 | if ( $elem.css('backgroundColor') == transparent ) {
169 | return !$elem.is('body') ? test( $elem.parent() ) : fallback || transparent ;
170 | } else {
171 | return $elem.css('backgroundColor');
172 | }
173 | }
174 | return test( $(this) );
175 | };
176 |
177 | })(jQuery);
--------------------------------------------------------------------------------