Skip to content
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

add optional parameter for additional scrollable areas #154

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+86 −2
Open

add optional parameter for additional scrollable areas #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
72 changes: 72 additions & 0 deletions demo/bootstrap-table-responsive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
<!DOCTYPE html>
<!--[if lt IE 8]><html lang="en" class="legacy"><![endif]-->
<!--[if gte IE 8]><!--><html lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Fixed Top Navbar Example for Bootstrap</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
min-height: 2000px;
padding-top: 70px;
}
.tableFloatingHeaderOriginal th {
background-color: #fff;
border-bottom: 1px solid #DDD;
}
</style>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Twitter Bootstrap Demo</a>
</div>
<div class="navbar-collapse collapse">
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<h1>Twitter Bootstrap Demo</h1>
<p>Note that in order to make the table header look ok when scrolling we need to add a background color and a bottom border.</p>
<p>There is also a bug in IE7 that causes the leftmost column to resize when scrolling. Consider using conditional comments (see source) to make sure the plugin is not loaded in this browser.
<p>When using bootstraps <i>table-responsive</i> there are two scroll container. The window for vertical scrolling and the <i>table-responsive</i> div for horizontal scrolling. Make sure you add the <i>table-responsive</i> div as additional scrollable area to the stickytableheaders call parameters.</p>
</p>
<div class='table-responsive table-short' >
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Label</th>
<th>Text</th>
</tr>
</thead>
<tbody onscroll="alert('aua')">
<tr>
<td>Very long text to demonstrate horizontal scrolling</td>
<td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
</tr>
</tbody>
</table>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery.stickytableheaders.js"></script>

<script>
// adding filler rows
for(var i = 0; i < 3; i++){
$('tbody tr').clone().appendTo('table');
}
var offset = $('.navbar').height();
var bootstrapResponsiveTableDiv = $('.table-responsive');
$("html:not(.legacy) table").stickyTableHeaders({fixedOffset: offset, additionalScrollableAreas: [bootstrapResponsiveTableDiv]});
</script>
</body>
</html>
1 change: 1 addition & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ <h1>
<li><a href="sticky-thead.html">Using StickyTableHeaders on a Table with several rows in &lt;thead&gt;</a></li>
<li><a href="border-collapse.html">Illustrating the issues with headers using border-collapse</a></li>
<li><a href="bootstrap.html">Using the plugin with Twitter Bootstrap</a></li>
<li><a href="bootstrap-table-responsive.html">Using the plugin with Twitter Bootstrap and table-responsive for horizontal scrolling</a></li>
<li><a href="border-box.html">box-sizing: border-box;</a></li>
</ul>
</body>
Expand Down
11 changes: 11 additions & 0 deletions js/jquery.stickytableheaders.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
objHead: 'head',
objWindow: window,
scrollableArea: window,
additionalScrollableAreas: [],
cacheHeaderHeight: false,
zIndex: 3
};
Expand Down Expand Up @@ -108,6 +109,11 @@
}
base.$scrollableArea.on('resize.' + name, base.toggleHeaders);
base.$scrollableArea.on('resize.' + name, base.updateWidth);

$.each(base.$additionalScrollableAreas,function(index, additionalScrollableArea){
additionalScrollableArea.on('scroll', base.toggleHeaders);
});

};

base.unbind = function(){
Expand All @@ -118,6 +124,10 @@
base.$window.off('.' + name + base.id, base.toggleHeaders);
}
base.$scrollableArea.off('.' + name, base.updateWidth);

$.each(base.$additionalScrollableAreas,function(index, additionalScrollableArea){
additionalScrollableArea.off('.', base.toggleHeaders);
});
};

// We debounce the functions bound to the scroll and resize events
Expand Down Expand Up @@ -289,6 +299,7 @@
base.$head = $(base.options.objHead);
base.$document = $(base.options.objDocument);
base.$scrollableArea = $(base.options.scrollableArea);
base.$additionalScrollableAreas = $(base.options.additionalScrollableAreas);
base.isWindowScrolling = base.$scrollableArea[0] === base.$window[0];
};

Expand Down
4 changes: 2 additions & 2 deletions js/jquery.stickytableheaders.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.