http://broadwcast.com/index.php?action=history&feed=atom&title=Template%3AFloating_table_headers
Template:Floating table headers - Revision history
2026-06-18T03:38:52Z
Revision history for this page on the wiki
MediaWiki 1.33.0
http://broadwcast.com/index.php?title=Template:Floating_table_headers&diff=9833&oldid=prev
John Lavalie at 18:34, 31 March 2012
2012-03-31T18:34:46Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 18:34, 31 March 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l146" >Line 146:</td>
<td colspan="2" class="diff-lineno">Line 146:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><noinclude></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">load [http://www.mediawiki.org/wiki/Extension:WikiScript]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>instructions at [http://code.google.com/p/js-floating-table-headers/wiki/Usage]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>instructions at [http://code.google.com/p/js-floating-table-headers/wiki/Usage]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></noinclude></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></noinclude></div></td></tr>
</table>
John Lavalie
http://broadwcast.com/index.php?title=Template:Floating_table_headers&diff=9832&oldid=prev
John Lavalie at 18:32, 31 March 2012
2012-03-31T18:32:11Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 18:32, 31 March 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l145" >Line 145:</td>
<td colspan="2" class="diff-lineno">Line 145:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><noinclude></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>instructions at [http://code.google.com/p/js-floating-table-headers/wiki/Usage]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>instructions at [http://code.google.com/p/js-floating-table-headers/wiki/Usage]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></noinclude></ins></div></td></tr>
</table>
John Lavalie
http://broadwcast.com/index.php?title=Template:Floating_table_headers&diff=9831&oldid=prev
John Lavalie at 18:24, 31 March 2012
2012-03-31T18:24:40Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 18:24, 31 March 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l145" >Line 145:</td>
<td colspan="2" class="diff-lineno">Line 145:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></script></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></includeonly></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">instructions at [http://code.google.com/p/js-floating-table-headers/wiki/Usage]</ins></div></td></tr>
</table>
John Lavalie
http://broadwcast.com/index.php?title=Template:Floating_table_headers&diff=9830&oldid=prev
John Lavalie at 18:19, 31 March 2012
2012-03-31T18:19:55Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revision as of 18:19, 31 March 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><includeonly></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><script type="text/javascript"></ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var floating_header = function() {</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>var floating_header = function() {</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141" >Line 141:</td>
<td colspan="2" class="diff-lineno">Line 143:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>floating_header();</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>floating_header();</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></script></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></includeonly></ins></div></td></tr>
</table>
John Lavalie
http://broadwcast.com/index.php?title=Template:Floating_table_headers&diff=9829&oldid=prev
John Lavalie: Created page with "var floating_header = function() { this.header = document.createElement('table'); this.header_height = 0; this.getkeys = function(obj) { var keys = new Array(); for ( v..."
2012-03-31T18:17:24Z
<p>Created page with "var floating_header = function() { this.header = document.createElement('table'); this.header_height = 0; this.getkeys = function(obj) { var keys = new Array(); for ( v..."</p>
<p><b>New page</b></p><div>var floating_header = function() {<br />
<br />
this.header = document.createElement('table');<br />
this.header_height = 0;<br />
<br />
this.getkeys = function(obj) {<br />
var keys = new Array();<br />
for ( var key in obj ) {<br />
keys.push(key);<br />
}<br />
return keys;<br />
};<br />
<br />
this.getXY = function( o ) {<br />
var y = 0;<br />
var x = 0;<br />
while( o != null ) {<br />
y += o.offsetTop;<br />
x += o.offsetLeft;<br />
o = o.offsetParent;<br />
}<br />
return { "x": x, "y": y };<br />
}<br />
<br />
this.setheader = function() {<br />
var win = window.pageYOffset ? window.pageYOffset : 0;<br />
var cel = document.documentElement ? document.documentElement.scrollTop : 0;<br />
var body = document.body ? document.body.scrollTop : 0;<br />
var result = win ? win : 0;<br />
if ( cel && ( ! result || ( result > cel ))) result = cel;<br />
var screenpos = body && ( ! result || ( result > body ) ) ? body : result;<br />
var theady_max = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y + this.table_obj.offsetHeight - this.header_height;<br />
if ( screenpos > this.theady && screenpos < theady_max ) {<br />
this.header.style.top=Math.round(screenpos) + 'px';<br />
this.header.style.left=this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).x + 'px';<br />
this.header.style.display = 'block';<br />
this.header_height = header.offsetHeight;<br />
}<br />
else {<br />
this.header.style.display = 'none';<br />
}<br />
}<br />
<br />
this.addclass = function(obj, newclass) {<br />
if ( obj.classes == null ) {<br />
obj.classes = new Array();<br />
}<br />
obj.classes[newclass] = 1;<br />
obj.className = this.getkeys(obj.classes).join(' ');<br />
return true;<br />
};<br />
<br />
this.theady = 0;<br />
<br />
this.build_header = function() {<br />
this.table_obj = document.getElementsByTagName('THEAD');<br />
if ( ! this.table_obj ) {<br />
alert("you MUST have <thead> and </thead> tags wrapping the part of the table you want to keep on the screen");<br />
return;<br />
}<br />
this.table_obj = this.table_obj[0];<br />
while ( this.table_obj.tagName != 'TABLE' ) {<br />
if ( this.table_obj.tagName == 'BODY' ) {<br />
alert('The THEAD section MUST be inside a table - how did you do that???');<br />
return;<br />
}<br />
this.table_obj = this.table_obj.parentNode;<br />
}<br />
<br />
thead = this.table_obj.getElementsByTagName('THEAD')[0].cloneNode(1);<br />
thead.id = 'copyrow';<br />
this.header.style.position='absolute';<br />
this.header.style.display='none';<br />
this.header.appendChild(thead);<br />
this.header.style.width = this.table_obj.offsetWidth;<br />
var srcths = this.table_obj.getElementsByTagName('THEAD')[0].getElementsByTagName('*');<br />
var copyths = thead.getElementsByTagName('*');<br />
for ( var x = 0; x < copyths.length; x++ ) {<br />
copyths[x].className = srcths[x].className;<br />
copyths[x].align = srcths[x].align;<br />
copyths[x].background = srcths[x].background;<br />
copyths[x].bgColor = srcths[x].bgColor;<br />
copyths[x].colSpan = srcths[x].colSpan;<br />
copyths[x].height = srcths[x].height;<br />
copyths[x].rowSpan = srcths[x].rowSpan;<br />
pr = Math.round(srcths[x].style.paddingRight.split('px')[0]);<br />
pl = Math.round(srcths[x].style.paddingLeft.split('px')[0]);<br />
bl = ( Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderLeftWidth.split('px')[0]) : 0;<br />
br = ( Math.round(srcths[x].style.borderRightWidth.split('px')[0]) ) ? Math.round(srcths[x].style.borderRightWidth.split('px')[0]) : 0;<br />
pt = Math.round(srcths[x].style.paddingTop.split('px')[0]);<br />
pb = Math.round(srcths[x].style.paddingBottom.split('px')[0]);<br />
bt = Math.round(srcths[x].style.borderTopWidth.split('px')[0]);<br />
bb = Math.round(srcths[x].style.borderBottomWidth.split('px')[0]);<br />
if ( srcths[x].currentStyle ) {<br />
for ( var y in srcths[x].currentStyle ) {<br />
if ( y == 'font' || y == 'top' ) continue;<br />
copyths[x].style[y] = srcths[x].currentStyle[y];<br />
}<br />
pr = Math.round(srcths[x].currentStyle.paddingRight.split('px')[0]);<br />
pl = Math.round(srcths[x].currentStyle.paddingLeft.split('px')[0]);<br />
bl = ( Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) ) ? Math.round(srcths[x].currentStyle.borderLeftWidth.split('px')[0]) : 0;<br />
pt = Math.round(srcths[x].currentStyle.paddingTop.split('px')[0]);<br />
pb = Math.round(srcths[x].currentStyle.paddingBottom.split('px')[0]);<br />
bt = Math.round(srcths[x].currentStyle.borderTopWidth.split('px')[0]);<br />
}<br />
if ( srcths[x].onclick ) copyths[x].onclick = srcths[x].onclick;<br />
var width = ( srcths[x].offsetWidth - pr - pl > 0 ) ? srcths[x].offsetWidth - pr - pl : 0;<br />
copyths[x].style.position = srcths[x].style.position;<br />
copyths[x].style.top = ( srcths[x].offsetTop - pt - pb > 0 ) ? srcths[x].offsetTop - pt - pb : srcths[x].offsetTop;<br />
copyths[x].style.top = srcths[x].style.top;<br />
copyths[x].style.height = srcths[x].offsetHeight;<br />
copyths[x].style.left = srcths[x].offsetLeft;<br />
if ( ! copyths[x].currentStyle ) {<br />
//copyths[x].style.width = Math.floor(document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width").split('px')[0]);<br />
copyths[x].style.width = document.defaultView.getComputedStyle(srcths[x],"").getPropertyValue("width");<br />
}<br />
else {<br />
copyths[x].style.width = srcths[x].offsetWidth - pr - pl; // - bl;<br />
copyths[x].width = srcths[x].width;<br />
}<br />
if ( x == copyths.length - 1 ) {<br />
this.header.style.paddingBottom = pb;<br />
this.header.style.borderBottom = bb;<br />
}<br />
}<br />
this.addclass(this.header, 'main');<br />
document.body.appendChild(this.header);<br />
theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;<br />
}<br />
<br />
var origonload = window.onload;<br />
window.onload = function() {<br />
if (origonload) {<br />
origonload();<br />
}<br />
this.build_header();<br />
};<br />
<br />
window.onscroll=this.setheader;<br />
<br />
};<br />
floating_header();</div>
John Lavalie