Hi Jordan,
I've revisited the code and taken out all the unnecessary bits and made it multi device. Try this:
Javascript:
/* Sticky Headers for Table 1 */
$(document).on(“knack-view-render.view_2614”, function (event, view, data) {
freezeColumn(view.key, 2, 1, 1); // Parameters are (a) view; (b) columns to freeze; (c) rows to freeze; (d) Unique table ID of the scene
});
/* Sticky Headers for Table 2 */
$(document).on(“knack-view-render.view_5780”, function (event, view, data) {
freezeColumn(view.key, 2, 1, 2); // Parameters are (a) view; (b) columns to freeze; (c) rows to freeze; (d) Unique table ID of the scene
});
/* Function to freeze headers and columns */
function freezeColumn(view, cols, headers, tableNumber) {
var v = document.getElementById(view);
var wrapEl = v.getElementsByClassName("kn-table-wrapper")[0];
var tableEl = v.getElementsByTagName("table")[0];
$(wrapEl).attr('id', 'view_wrap_' + tableNumber);
$(tableEl).attr('id', 'view_table_' + tableNumber);
for (var i = 0, row; row = tableEl.rows[i]; i++) {
//iterate through rows
if (i < headers) {
for (var j = 0, headerCell; headerCell = row.cells[j]; j++) {
if (j < cols) {
row.cells[j].classList.add("freeze-corner");
} else {
row.cells[j].classList.add("freeze-header");
}
}
} else {
for (var j = 0; j < cols; j++) {
tableEl.rows[i].cells[j].classList.add("freeze-column");
if (i % 2 == 0) {
row.cells[j].style.backgroundColor = "#f8f8f8";
} else {
row.cells[j].style.backgroundColor = "white";
}
}
}
}
var leftHeaders = tableEl.querySelectorAll('.freeze-column');
var topHeaders = tableEl.querySelectorAll('.freeze-header');
var tableCorner = tableEl.querySelectorAll('.freeze-corner');
wrapEl.addEventListener('scroll', function () {
var x = wrapEl.scrollLeft;
var y = wrapEl.scrollTop;
tableCorner.forEach(function (tableCorner) {
multiTrans(tableCorner, x, y);
});
leftHeaders.forEach(function (leftHeader) {
multiTrans(leftHeader, x, 0);
});
topHeaders.forEach(function (topHeader) {
multiTrans(topHeader, 0, y);
});
});
}
/* Function to make the transform translate work for multiple devices */
function multiTrans(el, x, y) {
$(el).css({
"transform": translate(x, y),
"msTransform": translate(x, y),
"webkitTransform": translate(x, y),
"MozTransform": translate(x, y),
"OTransform": translate(x, y)
});
}
/* Function to make the transform translate a little clearer */
function translate(x, y) {
return 'translate(' + x + 'px, ' + y + 'px)';
}
CSS:
#view_table_1 .corner {
position: relative;
top: 0px;
background-color: #e5e5e5;
z-index: 9 !important;
}
#view_table_1 .header-cell {
position: relative;
top: 0px;
background-color: #e5e5e5;
z-index: 8;
}
#view_table_1 .freeze-c1 {
position: relative;
top: 0px;
z-index: 7;
}
#view_wrap_1 {
overflow: scroll;
max-height: 800px;
}
#view_table_1 {
border-collapse: separate;
border-spacing: 1px;
}
#view_table_2 .corner {
position: relative;
top: 0px;
background-color: #e5e5e5;
z-index: 9 !important;
}
#view_table_2 .header-cell {
position: relative;
top: 0px;
background-color: #e5e5e5;
z-index: 8;
}
#view_table_2 .freeze-c1 {
position: relative;
top: 0px;
z-index: 7;
}
#view_wrap_2 {
overflow: scroll;
max-height: 800px;
}
#view_table_2 {
border-collapse: separate;
border-spacing: 1px;
}
Thanks
).