My FixedHeader fixes: iPad compatibility and correct parenting

arturoea

This patch to version 2.0.4 makes the headers compatible with iPad, which calculates offsets in an incompatible way.

Another fix is that it sets the new div with the cloned headers as a child of the div wrapper. This allows the headers to be automatically hidden if the corresponding table is hidden itself, and allows for top/left offset calculations to be done relative to the table, not the screen.

The offsets have only been corrected for the iPad for the header, not for fixedFooter nor fixedLeft nor Right.

This is a result of my work and needs for our systems; maybe integration into the mainstream code will require a better, more general (iPhone?) adaptation and maybe better coding; I am posting them here hoping that the main ideas will be integrated upstream.

arturoea

[code]: FixedHeader.js
===================================================================
--- FixedHeader.js
+++ FixedHeader.js-new
@@ -98,6 +98,17 @@
* Scope: global
*/
FixedHeader.prototype = {
+ /*
+ * Function: fnIsiPad
+ * Purpose: Detect if this is safari iPad browser.
+ * Returns: bool: detected
+ * Inputs: -
+ */
+ _fnIsiPad: function ()
+ {
+ return (jQuery.browser.safari && navigator.platform.indexOf("iPad") != -1);
+ },
+
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Initialisation
*/
@@ -153,7 +164,7 @@
s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false;

/* "Detect" browsers that don't support absolute positioing - or have bugs */
- s.bUseAbsPos = (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));
+ s.bUseAbsPos = this._fnIsiPad () || (jQuery.browser.msie && (jQuery.browser.version=="6.0"||jQuery.browser.version=="7.0"));

/* Add the 'sides' that are fixed */
if ( s.oSides.top )
@@ -288,7 +299,7 @@

/* Insert the newly cloned table into the DOM, on top of the "real" header */
nDiv.appendChild( nCTable );
- document.body.appendChild( nDiv );
+ s.nTable.parentNode.appendChild (nDiv);

return {
"nNode": nCTable,
@@ -314,6 +325,7 @@
m = s.oMes,
jqTable = jQuery(s.nTable),
oOffset = jqTable.offset(),
+ oPosition = jqTable.position(),
iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ),
iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' );

@@ -324,6 +336,8 @@
m.iTableRight = m.iTableLeft + m.iTableWidth;
m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth;
m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight;
+ m.iTablePosTop = oPosition.top;
+ m.iTablePosLeft = oPosition.left;
},

/*
@@ -560,19 +574,20 @@
nTable = oCache.nWrapper,
iTbodyHeight = s.nTable.getElementsByTagName('tbody')[0].offsetHeight;

- if ( oMes.iTableTop > oWin.iScrollTop )
+ var iTableTop = (this._fnIsiPad ())? oMes.iTableTop - oWin.iScrollTop: oMes.iTableTop;
+ if ( iTableTop > oWin.iScrollTop )
{
/* Above the table */
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
- this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style );
- this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
+ this._fnUpdateCache( oCache, 'sTop', oMes.iTablePosTop+"px", 'top', nTable.style );
+ this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
}
- else if ( oWin.iScrollTop > oMes.iTableTop+iTbodyHeight )
+ else if ( oWin.iScrollTop > iTableTop+iTbodyHeight )
{
/* At the bottom of the table */
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
- this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
- this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
+ this._fnUpdateCache( oCache, 'sTop', (iTableTop+iTbodyHeight)+"px", 'top', nTable.style );
+ this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
}
else
{
@@ -580,14 +595,14 @@
if ( s.bUseAbsPos )
{
this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style );
- this._fnUpdateCache( oCache, 'sTop', oWin.iScrollTop+"px", 'top', nTable.style );
- this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style );
+ this._fnUpdateCache( oCache, 'sTop', (oWin.iScrollTop-iTableTop+oMes.iTablePosTop)+"px", 'top', nTable.style );
+ this._fnUpdateCache( oCache, 'sLeft', oMes.iTablePosLeft+"px", 'left', nTable.style );
}
else
{
this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style );
this._fnUpdateCache( oCache, 'sTop', "0px", 'top', nTable.style );
- this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style );
+ this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft) +"px", 'left', nTable.style );
}
}
},
[/code]

allan

Hi arturoea,

Very interesting - thanks for the diff! I'll have a proper look through when I get a chance later on and see what is involved in adding in the remaining options needed for left right etc.

Regards,
Allan

Kibodeaux

This allows the headers to be automatically hidden if the corresponding table is hidden itself, and allows for top/left offset calculations to be done relative to the table, not the screen.


Thanks