d.bergonzi
Member
For an upgrade of this type my company is willing to pay !!!
We have now opened a commercial services section here on the forum for registered users. If you have a Fabrik project that you wish to have someone work on for you, post it under Help Wanted. If you are an application developer and wish to earn some money helping others, post your details under Fabrik Application Developers.
Both of these are unmoderated. It will be up to both parties to work out the details and come to an agreement.
For running J!5.1 you must https://fabrikar.com/forums/index.php?wiki/update-from-github/ or include the new file manually https://fabrikar.com/forums/index.php?threads/joomla-5-1-and-fabrik-cannot-find-files-error.54473/post-285151 See also Announcements
That is why it drives me up a wall working with javascript. And for years my favorite rant was 'I hate Microsoft'. Even in IE10 they are still playing by their own rules in many cases. For example, in IE10 the height of a div (or tbody) is always shown as 'auto'. I mean really, you'd think the least they could do is calculate a container height.Thinking about it, my main problem in the past has been supporting <= IE8. I haven't tried since IE10 came out, meaning that technically we can get away with only supporting IE9/10. Next time I get a few free minutes, I'll give this solution a go.
-- hugh
For an upgrade of this type my company is willing to pay !!!
Is this another one of those features I've never discovered before? Or are you talking about this?... http://fabrikar.com/forums/index.php?wiki/adding-a-show-hide-column-feature/Do you know offhand if the code will handle the "Toggle Columns" feature (dynamic showing/hiding of columns and groups)?
-- hugh
Thanks troester. I really DO learn something new every day.This is an old WIKI.
Since Fabrik3.1? it's included in list settings ("Filters" tab).
jQuery(document).ready(function(){
requirejs(['fab/fabrik'], function () {
window.eTop = jQuery("table#TABLEID tbody").offset().top;
window.eFoot = jQuery("table#TABLEID tfoot").offset().top;
// this will refresh header on ajax update (display row limit changed, pagination, filter changed, etc.)
Fabrik.addEvent('fabrik.list.update', function (block) {
setHeaders();
});
// this will refresh header on toggle of column visibility
jQuery("a[data-toggle-state]").click( function () {
// changes focus to close toggle dropdown
jQuery("div.fabrikDataContainer").click();
setHeaders();
});
setHeaders();
});
jQuery(window).scroll(function(event){
window.bodyTop = jQuery(this).scrollTop();
window.thisTop = window.eTop - jQuery(window).scrollTop(); //position of the ele window
window.tableWidth = jQuery("table#TABLEID tbody.fabrik_groupdata").width();
// Use for debugging
// console.log("headerHeight::"+window.headerHeight+" | bodyTop::" + window.bodyTop + " | eTop::"+window.eTop+" | thisTop::"+window.thisTop+" | eFoot::"+window.eFoot+" | footHeight::"+window.footHeight+" | dataHeight::"+window.dataHeight);
if (window.thisTop < window.headerHeight && window.bodyTop < window.dataHeight) {
var colCount = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td").length;
jQuery("div.fabrikNavContainer").css({"position":"fixed","top":0+window.menuHeight + "px"});
jQuery("div.fabrikNavContainer").width(window.tableWidth);
jQuery("table#TABLEID thead").css({"position":"fixed","top":window.menuHeight+window.navHeight+"px"});
jQuery("table#TABLEID thead").width(window.tableWidth);
for (k = 1; k <= colCount; k++) {
jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td:nth-child("+k+")").outerWidth(window.hcol[k]);
jQuery("table#TABLEID>thead>tr.fabrik___heading>th:nth-child("+k+")").outerWidth(window.hcol[k]);
}
}else{
jQuery("table#TABLEID thead").css({"position":"relative","top":"0px"});
jQuery("div.fabrikNavContainer").css({"position":"initial","top":"auto"});
}
// include this if you also want a sticky table footer
// use for debugging
// console.log("bodyTop::" + window.bodyTop + " | eTop::"+window.eTop+" | headerHeight::"+window.headerHeight+" | footHeight::"+window.footHeight+" | dataHeight::"+window.dataHeight);
if (window.bodyTop + window.eTop + window.headerHeight + window.footHeight*2 < window.dataHeight ){
jQuery("#TABLEID tfoot tr").css({"position":"fixed","bottom":"0","width":window.tableWidth+"px"});
}else{
jQuery("#TABLEID tfoot tr").css("position","relative");
}
});
/* resets header on window resize */
jQuery(window).on('resize', function(){
jQuery("table#TABLEID>thead>tr.fabrik___heading>th").each(function (){
jQuery(this).css("width","auto");
});
jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row:eq(0)>td").each(function(){
thisClass = jQuery(this)[0].classList[0];
jQuery("td[class^="+thisClass+"]").css("width","auto");
});
jQuery("table#TABLEID").css("width","100%");
setHeaders();
});
});
function setHeaders() {
/* set menuHeight to 0 (zero) if you don't have a fixed menu at the top of the page
or if you don't want to show the fixed menu above the sticky table headers */
window.menuHeight = 46;
/* set navHeight to 0 (zero) if you aren't using navigation options
or don't want to include the buttons container in the fixed header */
window.navHeight = jQuery("div.fabrikButtonsContainer").height();
window.headerHeight = window.navHeight + jQuery("table#TABLEID thead").innerHeight();
window.dataHeight = jQuery("table#TABLEID tbody.fabrik_groupdata").height();
window.footHeight = jQuery("#TABLEID tfoot tr").height();
window.tableWidth = jQuery("table#TABLEID tbody.fabrik_groupdata").width();
/* (Optional) This scrolls the table header to the top on load */
jQuery(this).scrollTop(window.eTop - window.headerHeight);
// sets the position styling to defaults - 're-attaches' the fixed headers/footer
jQuery("div.fabrikNavContainer").css({"position":"initial","top":"auto"});
jQuery("table#TABLEID thead").css({"position":"initial","top":"auto"});
jQuery("#TABLEID tfoot tr").css({"position":"initial","top":"auto"});
// use for debugging
// console.log("headerHeight::"+window.headerHeight+" | dataHeight::" + window.dataHeight + " | footHeight::"+window.footHeight+" | tableWidth::"+window.tableWidth);
// gets column widths from table body
window.hcol = new Array();
var colCount = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row:eq(0)>td").length;
for (k = 1; k <= colCount; k++) {
window.hcol[k] = jQuery("table#TABLEID>tbody.fabrik_groupdata>tr.fabrik_row>td:nth-child("+k+")").outerWidth();
// use for debugging
// console.log('window.hcol['+k+'] is '+window.hcol[k]);
}
}
/* suggested css for sticky headers / nav-bar / footer */
/* assigns background color for containers (if transparent)
and use z-index to bring object to forefront */
/* assign background color for navigation pills (if transparent) */
form#FORMID div.fabrikNavContainer {
background-color: #ffffff;
z-index: 999;
}
table#TABLEID thead tr.fabrikFilterContainer {
background-color: #cecece;
z-index: 99;
}
table#TABLEID thead {
z-index: 99;
}
table#TABLEID tfoot tr {
background-color: #cecece;
z-index: 999;
}
I've been using it on a joined table and it's working fine (even after updating to Joomla 3.5, Fabrik 3.4.3, and php7 last week) . Although it doesn't have repeat groups. But I don't see how that should matter.I did all what you said but it doesnt work. Is it because I'm using join tables ?
I just updated the Wiki with the code I am currently using. It looks like I simplified things quite a bit since the last time I updated it.Thanks I try this