Skip to content
Browse files

stickyheaders resizing

  • Loading branch information...
1 parent 12177fc commit ab7acf635dbf2719d6f01ee78253d3b000ba7800 @Mottie committed Oct 15, 2011
View
9 README.markdown
@@ -28,6 +28,15 @@ Included all original [document pages](http://mottie.github.com/tablesorter/docs
View the [complete listing here](http://mottie.github.com/tablesorter/changelog.txt).
+#### Version 2.0.22.1 (2011-10-15)
+
+* Updated the stickyHeaders widget
+ * Sticky headers will now resize with the browser window
+ * Updated blue and green themes to work better with sticky headers.
+ * If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
+
+ widgets: ['zebra', 'uitheme', 'stickyHeaders']
+
#### Version 2.0.22 (2011-10-13)
* Updated the pager plugin:
View
10 changelog.txt
@@ -1,5 +1,15 @@
TableSorter Change Log
+Version 2.0.22.1 (2011-10-15)
+============================
+
+* Updated the stickyHeaders widget
+ * Sticky headers will now resize with the browser window
+ * Updated blue and green themes to work better with sticky headers.
+ * If using the uitheme widget, make sure the 'uitheme' widget is applied before (left of) the 'stickyHeaders' widget, as follows:
+
+ widgets: ['zebra', 'uitheme', 'stickyHeaders']
+
Version 2.0.22 (2011-10-13)
============================
View
BIN css/blue/blue.zip
Binary file not shown.
View
9 css/blue/style.css
@@ -7,17 +7,20 @@ table.tablesorter {
width: 100%;
text-align: left;
}
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
+table.tablesorter thead tr.stickyHeader {
+ background: #ccc;
+}
+table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
background-color: #e6eeee;
- border: 1px solid #fff;
border-collapse: collapse;
font-size: 8pt;
padding: 4px;
}
-table.tablesorter thead tr .header {
+table.tablesorter thead tr .header, tr.stickyHeader .header {
background-image: url(black-bg.gif);
background-repeat: no-repeat;
background-position: center right;
+ border: 1px solid #fff;
cursor: pointer;
}
table.tablesorter tbody td {
View
BIN css/green/green.zip
Binary file not shown.
View
8 css/green/style.css
@@ -7,8 +7,7 @@ table.tablesorter {
width: 100%;
text-align: left;
}
-table.tablesorter thead tr th, table.tablesorter tfoot tr th {
- background-color: #e6eeee;
+table.tablesorter thead tr th, tr.stickyHeader th, table.tablesorter tfoot tr th {
border-collapse: collapse;
font-size: 12px;
padding: 5px;
@@ -17,16 +16,17 @@ table.tablesorter td {
color: #3d3d3d;
padding: 5px;
}
-table.tablesorter thead {
+table.tablesorter thead tr, table.tablesorter tfoot tr {
background: url(bkgd.png) center center repeat-x;
}
table.tablesorter .header {
background: transparent;
+ border-right: #cdcdcd 1px solid;
padding: 9px;
height: auto;
cursor: pointer;
}
-table.tablesorter .header span {
+table.tablesorter .header span, .stickyHeader .header span {
background: url(none.png) no-repeat;
padding: 2px 0 2px 25px;
}
View
11 docs/example-widget-sticky-header.html
@@ -13,15 +13,22 @@
<script src="js/chili/recipes.js"></script>
<script src="js/docs.js"></script>
- <!-- Tablesorter: required -->
+ <!-- Tablesorter: theme -->
<link rel="stylesheet" href="../css/blue/style.css">
+ <!-- test UI theme; also add 'uitheme' below: widgets: ['zebra', 'uitheme', 'stickyHeaders'] ; THE ORDER DOES MATTER! -->
+ <!--
+ <link rel="stylesheet" href="../css/ui/style.css">
+ <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
+ -->
+
+ <!-- Tablesorter script: required -->
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script id="js">$(function(){
$("table").tablesorter({
- widgets: ['stickyHeaders']
+ widgets: [ 'uitheme', 'zebra', 'stickyHeaders' ]
});
}); </script>
View
21 docs/index.html
@@ -1105,16 +1105,15 @@
<p><strong>Full release</strong> - Plugin, Documentation, Add-ons, Themes <a href="http://github.com/Mottie/tablesorter/downloads">jquery.tablesorter.zip</a></p>
-
<p><strong>Pick n choose</strong> - Place at least the required files in a directory on your webserver that is accessible to a web browser. Record this location.</p>
<strong id="Download-Required">Required:</strong>
<ul>
- <li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher)</li>
+ <li><a class="external" href="http://docs.jquery.com/Downloading_jQuery#Download_jQuery">jQuery</a> (1.2.1 or higher; some demos need jQuery 1.4.2+)</li>
<li><a href="../js/jquery.tablesorter.min.js">jquery.tablesorter.min.js</a> (17kb, minified for production - please put the file on your server)</li>
</ul>
- <strong id="Download-Addons">Optional/Add-Ons:</strong>
+ <strong id="Download-Addons">Optional / Add-Ons:</strong>
<ul>
<li><a class="external" href="http://plugins.jquery.com/files/jquery.metadata.2.1.zip">jQuery Metadata 2.1</a> (3,7kb, required for setting <a href="#Examples">inline options</a>)</li>
<li><a href="../js/jquery.tablesorter.js">jquery.tablesorter.js</a> (31kb, for development)</li>
@@ -1145,18 +1144,18 @@
<a name="Support"></a>
<h1>Support</h1>
- <p>
- Support is available through the
- <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a>.
- </p>
- <p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
+ <p>If you are having a problem with the plugin or you want to submit a feature request, please <a href="https://github.com/Mottie/tablesorter/issues">submit an issue</a>.</p>
+
+ <p>If you would like to contribute, <a href="https://github.com/Mottie/tablesorter">fork a copy on github</a>.</p>
+
+ <p>Support is also available through the <a class="external" href="http://jquery.com/discuss/">jQuery Mailing List</a> or <a class="external" href="http://stackoverflow.com/">StackOverflow</a>.</p>
+
+ <p>Access to the jQuery Mailing List is also available through <a class="external" href="http://www.nabble.com/JQuery-f15494.html">Nabble Forums</a>.</p>
<a name="Credits"></a>
<h1>Credits</h1>
- <p>
- Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.
- </p>
+ <p>Written by <a class="external" href="http://lovepeacenukes.com">Christian Bach</a>.</p>
<p>
Documentation written by <a class="external" href="http://www.ghidinelli.com">Brian Ghidinelli</a>,
based on <a class="external" href="http://malsup.com/jquery/">Mike Alsup's</a> great documention.<br>
View
26 js/jquery.tablesorter.widgets.js
@@ -142,12 +142,14 @@ $.tablesorter.addWidget({
var win = $(window),
header = $(table).find('thead'),
hdrCells = header.find('tr').children(),
+ brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10),
sticky = header.find('tr').clone()
.addClass('stickyHeader')
.css({
- width : header.width(),
+ width : header.outerWidth() + brdr * 2,
position : 'fixed',
top : 0,
+ marginLeft : -brdr,
visibility : 'hidden'
}),
stkyCells = sticky.children();
@@ -177,14 +179,20 @@ $.tablesorter.addWidget({
});
header.prepend( sticky );
// make it sticky!
- win.scroll(function(){
- var $t = $(table),
- offset = $t.offset(),
- sTop = win.scrollTop(),
- sticky = $t.find('.stickyHeader'),
- vis = ((sTop > offset.top) && (sTop < offset.top + $t.height())) ? 'visible' : 'hidden';
- sticky.css('visibility', vis);
- });
+ win
+ .scroll(function(){
+ var $t = $(table),
+ offset = $t.offset(),
+ sTop = win.scrollTop(),
+ vis = ((sTop > offset.top) && (sTop < offset.top + $t.find('tbody').height())) ? 'visible' : 'hidden';
+ sticky.css('visibility', vis);
+ })
+ .resize(function(){
+ sticky.css({ width: header.outerWidth() + brdr * 2 })
+ stkyCells.each(function(i){
+ $(this).width( hdrCells.eq(i).width() );
+ });
+ });
}
});

0 comments on commit ab7acf6

Please sign in to comment.
Something went wrong with that request. Please try again.