Comments (10)
I do not remember.. But... Do you tried put it after freeze header initialization (of course, inside in document.ready)?
Yeah, i know.. My english is not perfect :DDD, sorry
from freezeheader.
I was playing around with this last night and here is the code that I changed to enable horizontal scrolling. Sorry, no time for a pull request right now...
Here is what it looks like:
Starting at line 60 of jquery.freezeheader.js
, here are the changes that made the horizontal scrolling possible:
if (obj.header.offset() != null) {
if (limiteAlcancado(obj, params)) {
if (!copiedHeader) {
cloneHeaderRow(obj);
copiedHeader = true;
}
// The following line was added - waynebloss
obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
}
else {
if (($(document).scrollTop() > obj.header.offset().top)) {
obj.container.css("position", "absolute");
obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
// The same exact line was added here (yuck!) - waynebloss
obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
}
else {
obj.container.css("visibility", "hidden");
obj.container.css("top", "0px");
obj.container.width(0);
}
copiedHeader = false;
}
}
I did not use the included style.css file from the freezeheader repository, instead I used Bootstrap and here is the HTML for the demo shown above:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.freezeheader.js"></script>
<!-- link rel="stylesheet" type="text/css" href="css/style.css" / -->
<style type="text/css">
.navbar { margin-bottom: 0 !important; }
body { padding-top: 50px; }
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#table1").freezeHeader({offset: '50px'});
})
</script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="#">Title, Navbars, Menus, etc...</a>
</div>
</div>
</div>
<table class="table" style="min-width: 1000px" id="table1">
<thead>
<tr style="background-color:white;">
<th style='width: 250px'>
Culture Name
</th>
<th style='width: 250px'>
Display Name
</th>
<th style='width: 250px'>
Culture Code
</th>
<th style='width: 250px'>
ISO 639x
</th>
</tr>
</thead>
<tbody>
<tr class="grid">
<td>
hr-HR
</td>
<td>
Croatian - Croatia
</td>
<td>
0x041A
</td>
<td>
HRV
</td>
</tr>
<!-- Lots more rows go here, get them from freezeheader repo index.html file. -->
</tbody>
</table>
</body>
</html>
from freezeheader.
very good!
with a small change
//at line 46:
obj.scroller = params && params.height !== undefined ? $('#hdScroll' +
obj.id) : $(window);
// The following line was added - waynebloss
obj.container.css("left", ("-" +* obj.scroller.scrollLeft()* + "px"));
I will publish your changes using the bootstrap.
2015-11-03 23:35 GMT-02:00 Wayne Bloss [email protected]:
I was playing around with this last night and here is the code that I
changed to enable horizontal scrolling. Sorry, no time for a pull request
right now...Here is what it looks like:
[image: table-grid]
https://cloud.githubusercontent.com/assets/623736/10926986/f992ed4e-8269-11e5-8199-738b934e0187.gifStarting at line 60 of jquery.freezeheader.js
,freezeheader/js/jquery.freezeheader.js
Line 60 in b95b852
here are the changes that made the horizontal scrolling possible:if (obj.header.offset() != null) {
if (limiteAlcancado(obj, params)) {
if (!copiedHeader) {
cloneHeaderRow(obj);
copiedHeader = true;
}
// The following line was added - waynebloss
obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
}
else {if (($(document).scrollTop() > obj.header.offset().top)) { obj.container.css("position", "absolute"); obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px"); // The same exact line was added here (yuck!) - waynebloss obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px")); } else { obj.container.css("visibility", "hidden"); obj.container.css("top", "0px"); obj.container.width(0); } copiedHeader = false; }
}
I did not use the included style.css file from the freezeheader
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script> <script type="text/javascript" src="js/jquery.freezeheader.js"></script> <style type="text/css"> .navbar { margin-bottom: 0 !important; } body { padding-top: 50px; } </style> <script language="javascript" type="text/javascript"> $(document).ready(function () { $("#table1").freezeHeader({offset: '50px'}); }) </script>
repository, instead I used Bootstrap and here is the HTML for the demo
shown above:
Culture Name Display Name Culture Code ISO 639x hr-HR Croatian - Croatia 0x041A HRV —
Reply to this email directly or view it on GitHub
#11 (comment)
.
att,
Laerte Mercier Junior
[email protected]
Tel:(27)9643-9964
"O ignorante afirma, o sábio duvida, o sensato reflete."
(Aristóteles)
from freezeheader.
One more change. Subtracting obj.grid.position().left
is necessary when the table has a parent with padding:
obj.container.css('left', '-' + (obj.scroller.scrollLeft() - obj.grid.position().left) + 'px');
There may be a better way to do all of this, but it's working for me right now. (UPDATE: This addition does not work.)
from freezeheader.
The most recent addition that I noted earlier does not actually work.
Any suggestions on how to account for horizontal padding on the left would be appreciated. If I find something I will post it here.
from freezeheader.
The code that is working the best for me is the line from #2:
obj.container.css('left', (window.pageXOffset * -1) + obj.grid.offset().left);
from freezeheader.
Hi all
Why the last version do not include these modifications?
from freezeheader.
@saxrub Here is an alternative - http://mkoryak.github.io/floatThead/
from freezeheader.
Whats the change that got horizontal scroll working
here's what I tried
`(function ($) {
var TABLE_ID = 0;
$.fn.freezeHeader = function (params) {
var copiedHeader = false;
function freezeHeader(elem) {
var idObj = elem.attr('id') || ('tbl-' + (++TABLE_ID));
if (elem.length > 0 && elem[0].tagName.toLowerCase() == "table") {
var obj = {
id: idObj,
grid: elem,
container: null,
header: null,
divScroll: null,
openDivScroll: null,
closeDivScroll: null,
scroller: null
};
if (params && params.height !== undefined) {
obj.divScroll = '<div id="hdScroll' + obj.id + '" style="height: ' + params.height + '; overflow-y: scroll">';
obj.closeDivScroll = '</div>';
}
obj.header = obj.grid.find('thead');
if (params && params.height !== undefined) {
if ($('#hdScroll' + obj.id).length == 0) {
obj.grid.wrapAll(obj.divScroll);
}
}
//obj.scroller = params && params.height !== undefined
// ? $('#hdScroll' + obj.id)
// : $(window);
obj.container.css("left", ("-" + obj.scroller.scrollLeft()* + "px"));
if (params && params.scrollListenerEl !== undefined) {
obj.scroller = params.scrollListenerEl;
}
obj.scroller.on('scroll', function () {
if ($('#hd' + obj.id).length == 0) {
obj.grid.before('<div id="hd' + obj.id + '"></div>');
}
obj.container = $('#hd' + obj.id);
if (obj.header.offset() != null) {
if (limiteAlcancado(obj, params)) {
elem.trigger("freeze:on");
if (!copiedHeader) {
cloneHeaderRow(obj);
copiedHeader = true;
}
// The following line was added - waynebloss
obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
}
else {
if (($(document).scrollTop() > obj.header.offset().top)) {
obj.container.css("position", "absolute");
obj.container.css("top", (obj.grid.find("tr:last").offset().top - obj.header.height()) + "px");
// The same exact line was added here (yuck!) - waynebloss
obj.container.css("left", ("-" + document.body.scrollLeft.toString() + "px"));
}
else {
elem.trigger("freeze:off");
obj.container.css("visibility", "hidden");
obj.container.css("top", "0px");
obj.container.width(0);
}
copiedHeader = false;
}
}
});
}
}
function limiteAlcancado(obj, params) {
if (params && (params.height !== undefined || params.scrollListenerEl !== undefined)) {
return (obj.header.offset().top <= obj.scroller.offset().top);
}
else {
var top = obj.header.offset().top;
if (params) {
if (params.offset !== undefined) {
top -= parseInt(params.offset.replace('px',''),10);
}
}
var gridHeight = (obj.grid.height() - obj.header.height() - obj.grid.find("tr:last").height()) + obj.header.offset().top;
return ($(document).scrollTop() > top && $(document).scrollTop() < gridHeight);
}
}
function cloneHeaderRow(obj) {
obj.container.html('');
obj.container.val('');
var tabela = $('<table style="margin: 0 0;"></table>');
var atributos = obj.grid.prop("attributes");
$.each(atributos, function () {
if (this.name != "id") {
tabela.attr(this.name, this.value);
}
});
var clone = obj.header.clone(true);
clone.appendTo(tabela);
obj.container.append(tabela);
obj.container.width(obj.header.width());
obj.container.height(obj.header.height);
obj.container.find('th').each(function (index) {
var cellWidth = obj.grid.find('th').eq(index).width();
$(this).css('width', cellWidth);
});
obj.container.css("visibility", "visible");
if (params && params.height !== undefined) {
if(params.offset !== undefined){
obj.container.css("top", obj.scroller.offset().top + (params.offset.replace("px","") * 1) + "px");
}
else
{
obj.container.css("top", obj.scroller.offset().top + "px");
}
obj.container.css("position", "absolute");
} else if (params && params.scrollListenerEl!== undefined) {
obj.container.css("top", obj.scroller.find("thead > tr").innerHeight() + "px");
obj.container.css("position", "absolute");
obj.container.css("z-index", "2");
} else if (params && params.offset !== undefined) {
obj.container.css("top", params.offset);
obj.container.css("position", "fixed");
} else {
obj.container.css("top", "0px");
obj.container.css("position", "fixed");
}
}
return this.each(function (i, e) {
freezeHeader($(e));
});
};
})(jQuery);`
from freezeheader.
Hello, it's possible to have the final fixed code? I tried to apply the fix on the existing but it didn't work. You would be of great help to me. Thanks.
from freezeheader.
Related Issues (18)
- Header width on resizing HOT 1
- Frozen header is shifting to the bottom of the table HOT 4
- Issue with Chrome/Safari with Bootstrap HOT 1
- Float the header XX pixels down the page HOT 6
- Add suport to Grid controls for ASP.NET Core projects http://mvc6-grid.azurewebsites.net/ HOT 4
- Packaging
- Slight distortion of table in Firefox
- Horizontal Scroll issue. And about 1st issue HOT 2
- Header fixing
- Test
- Header Alignment Issue HOT 6
- 表头无法对齐
- Thead overlaps with content after table. HOT 3
- wrong th width if table has padding and/or border HOT 3
- add 'headroom' option
- adding footer freezing options
- Add way to remove freezeheader HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freezeheader.