Skip to content

Adding pixelHeight option and bumping version #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mikeokner wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding pixelHeight option and bumping version #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1f4ba5f
Adding pixelHeight option and bumping version
mikeokner Feb 6, 2015
6365267
Adding bower.json file
mikeokner Mar 31, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Usage
3. Load the Scroll Table Body plugin
4. Make sure you have a table with proper markup (`<thead>`, `<tbody>`, and `<tfoot>` if you want it)
5. Call `.scrollTableBody()` on your table element, which by default displays 10 rows of your table and scrolls the rest
6. Optional: pass `rowsToDisplay` as an option. For example, `$('table').scrollTableBody({rowsToDisplay:5});`
6. Optional: pass `rowsToDisplay` or `pixelHeight` as an option. For example, `$('table').scrollTableBody({rowsToDisplay: 5});` or `$('table').scrollTableBody({pixelHeight: 200});`

Example
-------
Expand Down
29 changes: 29 additions & 0 deletions bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "jquery.scrollTableBody",
"version": "1.0.1",
"homepage": "https://github.com/mikeokner/jquery.scrollTableBody",
"authors": [
"Michael Okner <mike@mikeokner.com>",
"Noah Heldman <noah.heldman@gmail.com>"
],
"description": "Easily scroll HTML table bodies while header/footer remain fixed",
"main": "src/jquery.scrollTableBody-1.0.1.js",
"moduleType": [
"globals"
],
"keywords": [
"scroll",
"table",
"body",
"jquery",
"overflow"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
6 changes: 3 additions & 3 deletions demo/fixed.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/underscore-1.5.2.min.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.0.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.1.js"></script>
</head>

<body>
Expand All @@ -27,7 +27,7 @@ <h2>Usage</h2>
<li>Load the Scroll Table Body plugin</li>
<li>Make sure you have a table with proper markup (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, and <code>&lt;tfoot&gt;</code> if you want it)
<li>Call <code>.scrollTableBody()</code> on your table element, which by default displays 10 rows of your table and scrolls the rest</li>
<li>Optional: pass <code>rowsToDisplay</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code></li>
<li>Optional: pass <code>rowsToDisplay</code> or <code>pixelHeight</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code> or <code>$('table').scrollTableBody({pixelHeight: 200});</code></li>
</ol>

<h2>Fixed Width Demo</h2>
Expand Down Expand Up @@ -135,4 +135,4 @@ <h2>Fixed Width Demo</h2>
});
</script>
</body>
</html>
</html>
6 changes: 3 additions & 3 deletions demo/horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/underscore-1.5.2.min.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.0.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.1.js"></script>
</head>

<body>
Expand All @@ -28,7 +28,7 @@ <h2>Usage</h2>
<li>Load the Scroll Table Body plugin</li>
<li>Make sure you have a table with proper markup (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, and <code>&lt;tfoot&gt;</code> if you want it)
<li>Call <code>.scrollTableBody()</code> on your table element, which by default displays 10 rows of your table and scrolls the rest</li>
<li>Optional: pass <code>rowsToDisplay</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code></li>
<li>Optional: pass <code>rowsToDisplay</code> or <code>pixelHeight</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code> or <code>$('table').scrollTableBody({pixelHeight: 200});</code></li>
</ol>

<h2>Horizontal Scroll Demo</h2>
Expand Down Expand Up @@ -240,4 +240,4 @@ <h2>Horizontal Scroll Demo</h2>
});
</script>
</body>
</html>
</html>
6 changes: 3 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<script src="../lib/jquery-1.10.2.min.js"></script>
<script src="../lib/underscore-1.5.2.min.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.0.js"></script>
<script src="../src/jquery.scrollTableBody-1.0.1.js"></script>
</head>

<body>
Expand All @@ -26,7 +26,7 @@ <h2>Usage</h2>
<li>Load the Scroll Table Body plugin</li>
<li>Make sure you have a table with proper markup (<code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, and <code>&lt;tfoot&gt;</code> if you want it)
<li>Call <code>.scrollTableBody()</code> on your table element, which by default displays 10 rows of your table and scrolls the rest</li>
<li>Optional: pass <code>rowsToDisplay</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code></li>
<li>Optional: pass <code>rowsToDisplay</code> or <code>pixelHeight</code> as an option. For example, <code>$('table').scrollTableBody({rowsToDisplay:5});</code> or <code>$('table').scrollTableBody({pixelHeight: 200});</code></li>
</ol>

<h2>Basic Demo</h2>
Expand Down Expand Up @@ -130,4 +130,4 @@ <h2>Basic Demo</h2>
});
</script>
</body>
</html>
</html>
10 changes: 8 additions & 2 deletions src/jquery.scrollTableBody-1.0.0.js → src/jquery.scrollTableBody-1.0.1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@
var existingMarginBottom = table.css('margin-bottom');
table.css('margin-bottom', 0);
var rowHeight = table.find('tbody tr:first').outerHeight();
var tableHeight = rowHeight * options.rowsToDisplay;
var tableHeight;
if (typeof options.pixelHeight !== 'undefined') {
tableHeight = options.pixelHeight;
}
else {
tableHeight = rowHeight * options.rowsToDisplay;
}

var headerTable = $('<table style="table-layout:fixed;width:auto;margin-bottom:0;" class="jqstb-header-table ' + existingClasses + '"><thead><tr><td></td></tr></thead></table>'),
footerTable = $('<table style="table-layout:fixed;width:auto;margin-bottom:' + existingMarginBottom + ';" class="jqstb-footer-table ' + existingClasses + '"><tfoot><tr><td></td></tr></tfoot></table>'),
Expand Down Expand Up @@ -124,4 +130,4 @@
$dataTable.children('thead, tfoot').hide();
});
}
})(jQuery);
})(jQuery);