d.bergonzi
Member
For an upgrade of this type my company is willing to pay !!!
Hello Fabrik Community
Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.
Exciting times to be sure.
The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section
We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..
Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.
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