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
Please see our announcement here.
See post #37. Try using the code I added to the Wiki. That provides better instructions, is less complex, and will always be the most current.Only a question, i use the code in the post #33 but the header doesn't 're-attaches' when i scroll up. Any solution?
var tgBodyTop = jQuery('body.site').scrollTop();
var tgBodyTop = jQuery(window).scrollTop();
tr.fabrik___heading {
background-color: #cecece;
}
thead, tfoot {
z-index: 1;
}
element.style {
text-align: center;
vertical-align: middle;
width: 86px;
}
http://site/templates/protostar/css/template.css ligne 1758:
.table-bordered thead:first-child tr:first-child > th:first-child, .table-bordered tbody:first-child tr:first-child > td:first-child, .table-bordered tbody:first-child tr:first-child > th:first-child {
border-top-left-radius: 4px;
}
ligne 1747:
.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {
border-top: 0 none;
}
ligne 1716:
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
/*border-top: 0 none;*/
}
ligne 1713:
.table thead th {
/*vertical-align: bottom;*/
}
ligne 1743:
.table-bordered th, .table-bordered td {
border-left: 1px solid #ddd;
}
Ligne 1730:
.table-condensed th, .table-condensed td {
padding: 4px 5px;
}
Ligne 1710:
.table th {
font-weight: bold;
}
Ligne 1702:
.table th, .table td {
/*border-top: 1px solid #ddd;*/
line-height: 18px;
/*padding: 8px;
text-align: left;
vertical-align: top;*/
}
H?rit? de table#list_21_com_fabrik_21.table.table-striped.table-bordered.table-condensed.table-hover
Ligne 1734:
.table-bordered {
border-collapse: separate;
}
Ligne 1692:
table {
/*border-collapse: collapse;*/
border-spacing: 0;
}
H?rit? de body.site.com_fabrik.view-list.no-layout.no-task.itemid-232-fluid
Ligne 205:
body {
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
/*line-height: 18px;*/
}
H?rit? de html
Ligne 23
html {
/*font-size: 100%;*/
element.style {
text-align: center;
vertical-align: middle;
width: 86px;
}
Ligne 1716
.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {
border-top: 0 none;
}
Ligne 1713:
.table thead th {
/* vertical-align: bottom;*/
}
Ligne 1710:
.table th {
font-weight: bold;
}
Ligne 1702:
.table th, .table td {
/* border-top: 1px solid #ddd;*/
line-height: 18px;
padding: 8px;
/*text-align: left;
vertical-align: top;*/
}
H?rit? de table.table.temptable
Ligne 1692
table {
border-collapse: collapse;
border-spacing: 0;
}
H?rit? de body.site.com_fabrik.view-list.no-layout.no-task.itemid-232-fluid
ligne 205:
body {
color: #333;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 13px;
/*line-height: 18px;*/
}
H?rit? de html
ligne 23
html {
/*font-size: 100%;*/
var tgBodyTop = jQuery(window).scrollTop();
var tgBodyLeft = document.getElementById("list_##_com_fabrik_##").offsetLeft - jQuery(window).scrollLeft();
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px"});
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px","left":tgBodyLeft+"px"});
jQuery(".docked").css({"position":"fixed","bottom":"0px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});
jQuery(".docked").css({"position":"fixed","bottom":"0px","left":tgBodyLeft+"px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});
So, I'm unsure where to place the the replacement code you recommended below...jQuery(".docked").css({"position":"fixed","bottom":"0px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});
jQuery(".docked").css({"position":"fixed","bottom":"0px","left":tgBodyLeft+"px","width":window.tablewidth+"px","display":"inherit","z-index":"1"});
Any more suggestions?/*
* Creates Fixed table headers and footer in a Fabrik list using the default bootstrap template.
* How to use:
* 1 Open or create the list_#.js file for the list that contains the table you want to have fixed headers
* 2 Include a call to setHeaders() at the end of the requirejs(['fab/fabrik'] function (as shown below)
* 3 Copy the jQuery(window).scroll(function(event) and function setHeaders() code into that js file
* ( For a default Joomla protostar template using the default Fabrik bootstrap list template
you can skip steps 4-7 and just replace all instances of '260' in this code with your List id.)
* 4 Examine the page html and identify the id used for the form object
* 5 Replace all instances of "listform_6_com_fabrik_6" with that form id
* 6 Examine the page html and identify the id for the table object
* 7 Replace all instances of "list_6_com_fabrik_6" with that table id
* 8 Take note of any remarks in code beginning with /*** for additional options/settings.
* Enjoy your 'fixed header'!
* NOTE: It may be necessary to include the setHeaders() call in another fabrik *.js file instead
* - i.e. if you are also using a Fabrik list or form module on the same page which might affect when this list is shown.
*/
requirejs(['fab/fabrik'], function () {
setHeaders();
});
/* this function checks if passed jQuery object is in viewport of browser */
jQuery.fn.inView = function(){
//Window Object
var win = jQuery(window);
//Object to Check
obj = jQuery(this);
//the top Scroll Position in the page
var scrollPosition = win.scrollTop();
//the end of the visible area in the page, starting from the scroll position
var visibleArea = win.scrollTop() + win.height();
//the end of the object to check
var objEndPos = (obj.offset().top + obj.outerHeight());
return(visibleArea >= objEndPos && scrollPosition <= objEndPos ? true : false)
};
/* The scroll event listener */
jQuery(window).scroll(function(event){
/* Get the current table vertical position as page is scrolled */
window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.scrollY;
/* Get the scroll position of entire document */
var tgBodyTop = jQuery(window).scrollTop();
/* detach/attach table header */
if(tgBodyTop > window.tableFromTop) {
if(jQuery("#listform_6_com_fabrik_6 div.fabrikDataContainer table.temptable").length==0){
var temphead = jQuery("table#list_6_com_fabrik_6 thead").clone();
jQuery(temphead).prop('id','temphead');
/* Create fixed header */
var tableclasses = document.getElementById("list_6_com_fabrik_6").className;
/* The z-index may have to be set higher if the fixed header is not 'on top' */
jQuery("#listform_6_com_fabrik_6 div.fabrikDataContainer").prepend('<table class="'+tableclasses+' temptable" style="width:'+window.tablewidth+'px;z-index:1"><thead>'+jQuery(temphead).html()+'</thead></table>');
/* Note: Set the "top:" fixed position for table header in function setHeaders() */
jQuery("table.temptable").css({"position":"fixed","top":window.fixedMenuHeight+"px"});
}
}else{
if(jQuery("#listform_6_com_fabrik_6 div.fabrikDataContainer table.temptable").length){
jQuery("#listform_6_com_fabrik_6 div.fabrikDataContainer table.temptable").remove();
}
}
});
/* Reset the fixed headers if window gets resized */
jQuery( window ).resize(function() {
setHeaders();
});
/* main function call for fixed headers/footer -
call this function as the last line in the requirejs(['fab/fabrik'], function () */
function setHeaders() {
/*** Set window.fixedMenuHeight to the height of fixed page header/menu - 0 if none) ***/
window.fixedMenuHeight = 34;
/* clear settings if any are set */
jQuery("#list_6_com_fabrik_6 tfoot").removeClass("docked");
jQuery("#listform_6_com_fabrik_6 div.fabrikDataContainer table.temptable").remove();
jQuery("#bottdiv").remove();
/* initialize window variables */
window.thisTable = document.getElementById("list_6_com_fabrik_6");
window.tableFromTop = window.thisTable.getBoundingClientRect().top + window.scrollY;
window.theadHeight = document.getElementById("list_6_com_fabrik_6").getElementsByTagName('thead')[0].clientHeight;
window.tfootHeight = document.getElementById("list_6_com_fabrik_6").getElementsByTagName('tfoot')[0].clientHeight;
window.viewHeight = jQuery(window).height();
/* Create an empty div to identify the bottom of the table view, where the footer would normally be */
jQuery(jQuery("<div>",{id:"bottdiv"})).appendTo("#listform_6_com_fabrik_6 div.fabrikDataContainer");
/* initializes vars for css styling of each table header (th) - width, padding */
window.tablewidth = document.getElementById("list_6_com_fabrik_6").clientWidth;
var xwidth,xpad;
// sets width and padding of each column as css style so cloned header will have it
jQuery("table#list_6_com_fabrik_6 thead tr th").each(function (){
xwidth = jQuery(this).width();
xpad = jQuery(this).css('padding');
jQuery(this).css({'width':xwidth+'px','padding':xpad});
});
/*** Note each remark for scrollTop options. ***/
/* This topPos value would scroll to the top of the list form */
// var topPos = document.getElementById("listform_6_com_fabrik_6").getBoundingClientRect().top + window.scrollY - window.fixedMenuHeight ;
/* This topPos value would scroll to the top of the table */
// var topPos = document.getElementById("list_6_com_fabrik_6").getBoundingClientRect().top + window.scrollY - window.fixedMenuHeight ;
/* If you have included a page class in the menu this would scroll to the top of the page (replace "onlinesurvey" with your page class name) */
var topPos = document.getElementsByClassName("onlinesurvey")[0].getBoundingClientRect().top + window.scrollY - window.fixedMenuHeight;
/*** Remark out the next line or remove this section if you don't want to scroll to the list/table/page on page load ***/
jQuery("html, body").animate({ scrollTop: topPos });
};
if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// your code..
}